我正在尝试使用以下代码扩展Chart.js中的折线图：
var shotsData = {
labels: ["Shot 1", "Shot 2", "Shot 3", "Shot 4", "Shot 5"],
datasets: [{ data: [5, 7, 1, 4, 9] }]
};
var ctx = document.getElementById("shots").getContext("2d");
Chart.types.Line.extend({
name: "LineAlt",
initialize: function () {
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(0, 15);
this.chart.ctx.lineTo(159, 274);
this.chart.ctx.stroke();
Chart.types.Line.prototype.initialize.apply(this, arguments);
}
});
new Chart(ctx).LineAlt(shotsData);
这绘制了我的图表，但我还希望图表内有一条自定义线，该线写在initialize函数内部，但这似乎行不通。当我删除该行时，Chart.types.Line.prototype.initialize.apply(this, arguments);将显示自定义行。
这是一个小提琴
您可以覆盖绘图功能以将绘图附加到画布上
draw: function () {
//call the super draw
Chart.types.Line.prototype.draw.apply(this, arguments);
//now your custom line
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(0, 5);
this.chart.ctx.lineTo(100, 100);
this.chart.ctx.stroke();
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句