angular - 角度 6 中的燃尽图

Question

我想在我的 Angular 6 应用程序中实现燃尽图。我尝试使用 D3-burn-down-chart 来实现燃尽图，但由于所有样本都在 .js 文件中可用，我无法对其进行转换到 .ts 文件中。这是我到目前为止所尝试的

initChart() {

var lineDataActual = [{
  'x': 0,
  'y': 200
}, {
  'x': 10,
  'y': 50
}, {
  'x': 20,
  'y': 180
}, {
  'x': 30,
  'y': 60
}, {
  'x': 40,
  'y': 120
}, {
  'x': 50,
  'y': 30
}];

var svg = d3.select("#visualisation"),
  width = 1000,
  height = 500,
  margins = {
    top: 80,
    right: 50,
    bottom: 80,
    left: 80
  },
  xMin = d3.min(lineDataActual, function (d) {          
    return d.x;
  }),
  xMax = d3.max(lineDataActual, function (d) {          
    return d.x;
  }),
  yMin = d3.min(lineDataActual, function (d) {          
    return d.y;
  }),
  yMax = d3.max(lineDataActual, function (d) {          
    return d.y;
  }),

  xRange = d3.scaleLinear().range([margins.left, width - margins.right]).domain([

  xMin,xMax
  ]),

yRange = d3.scaleLinear().range([height - margins.top, margins.bottom]).domain([

  yMin,yMax     
]),

xAxis = d3.axisBottom(xRange),

yAxis = d3.axisLeft(yRange);

function make_x_axis() {        
  return d3.axisBottom(xRange)
}

function make_y_axis() {        
  return d3.axisLeft(yRange);
}

svg.append("g")         
      .attr("class", "grid")
      .attr("transform", "translate(0," + (height - margins.top) + ")")
      .call(make_x_axis()
          .tickSize((-height) + (margins.top + margins.bottom))
          .tickFormat(null)
      )

  svg.append("g")         
      .attr("class", "grid")
  .attr("transform", "translate(" + (margins.left) + ",0)")
      .call(make_y_axis()
          .tickSize((-width) + (margins.right + margins.left))
          .tickFormat(null)
      )

svg.append("svg:g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + (height - (margins.bottom)) + ")")
  .call(xAxis);

svg.append("svg:g")
  .attr("class", "y axis")
  .attr("transform", "translate(" + (margins.left) + ",0)")
  .call(yAxis);



var lineFunc = d3.line()
  .x(function (d) {
    return xRange(d[0]);
  })
  .y(function (d) {
    return yRange(d[1]);
  })
    .curve(d3.curveCatmullRom.alpha(0.5));


var lineDataIdeal = [{
  'x': xMin,
  'y': yMax
}, {
  'x': xMax,
  'y': yMin 
}];


svg.append("svg:path")
  .attr("d", lineFunc(lineDataIdeal))
  .attr("class", "ideal");

svg.append("svg:path")
  .attr("d", lineFunc(lineDataActual))
  .attr("class", "actual");

svg.append("text")
  .attr("class", "x label")
  .attr("text-anchor", "end")
  .attr("x", width)
  .attr("y", height -6)
  .text("Days");

svg.append("text")
  .attr("class", "y label")
  .attr("text-anchor", "end")
  .attr("y", 6)
  .attr("dy", ".75em")
  .attr("transform", "rotate(-90)")
  .text("Hours remaining");
}

在这里，在这部分代码中

svg.append("svg:path")
  .attr("d", lineFunc(lineDataIdeal))
  .attr("class", "ideal");

svg.append("svg:path")
  .attr("d", lineFunc(lineDataActual))
  .attr("class", "actual");

我收到一个错误，说Argument of type '{ 'x': number; 'y'：数字；}[]' 不可分配给“[number, number][]”类型的参数。键入'{'x'：数字；'y'：数字；}' 缺少类型 '[number, number]' 的以下属性：0、1、length、pop 和另外 28 个。

我尝试更改lineDataActual参数的结构，但它不起作用，如果我尝试删除这些方法，则图形没有绘制。

:这是我的 stackblitz 链接

谁能帮我解决这个问题。

谢谢你。

标签： angulard3.jsburndowncharts