我想在我的 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参数的结构,但它不起作用,如果我尝试删除这些方法,则图形没有绘制。
谁能帮我解决这个问题。
谢谢你。