Question

我正在尝试使用以下代码扩展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);时，会显示自定义行。

这是一个小提琴

http://jsfiddle.net/92ANv/5/

Answer 1

您可以覆盖绘图功能以将绘图附加到画布

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();
}

小提琴http://jsfiddle.net/leighking2/5Lgzvu3r

使用自定义行扩展折线图

1 个答案: