Chart.js 如何使用chartjs绘制虚线？

我想用chartjs画一条虚线。我没有看到创建虚线的任何选项。我觉得我们需要扩展chartjs来支持这一点。有人能帮我吗？

画一条虚线 您不需要扩展图表，但这样做会更干净

---

预览

脚本

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function () {
        Chart.types.Line.prototype.initialize.apply(this, arguments);

        var ctx = this.chart.ctx;
        var originalBezierCurveTo = ctx.bezierCurveTo;
        ctx.bezierCurveTo = function () {
            ctx.setLineDash([10, 10]);
            originalBezierCurveTo.apply(this, arguments)
        }
    }
});

...

new Chart(ctx).LineAlt(chartData);

---

小提琴-

---

注意-替代方法是使用图表对象覆盖bezierCurveTo

这是因为

bezierCurveTo

仅用于绘制直线。如果要对直线执行此操作，它将不起作用，因为

lineTo

用于其他内容（轴、网格线…）

---

我上次选中Chart.js 2.0时，它有一个

borderDash

选项（请参见）

在

Chart.js 2.1+

中，在数据集中使用

borderDash

选项。它需要一个由两个数字组成的数组

对于虚线，使用

borderDash

和

borderCapStyle

。以下示例创建了一条虚线（直径为3倍）：

输出

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function () {
        Chart.types.Line.prototype.initialize.apply(this, arguments);

        var ctx = this.chart.ctx;
        var originalBezierCurveTo = ctx.bezierCurveTo;
        ctx.bezierCurveTo = function () {
            ctx.setLineDash([10, 10]);
            originalBezierCurveTo.apply(this, arguments)
        }
    }
});

...

new Chart(ctx).LineAlt(chartData);

输出（演示时对比度更好）

作者要求的是虚线，而不是虚线（在代码笔中提供）。