如何使用chartjs绘制虚线？

Question

我想用chartjs绘制虚线.我没有看到创建虚线的任何选项.我觉得我们需要扩展chartjs以支持这一点.有人可以帮助我吗？

Answer 1

在Chart.js 2.1+,使用borderDash数据集中的选项.它需要两个数字的数组.看到这个codepen

Answer 2

对于虚线，请使用borderDash和borderCapStyle。以下示例创建一条虚线（直径 3px）：

data: {
  datasets: [
    {
        data           : data,
        borderWidth    : 3, // set diameter of dots here
        borderColor    : '#ccc',
        fill           : false,
        pointRadius    : 0,
        borderDash     : [0,6], // set 'length' of dash/dots to zero and
                                // space between dots (center to center)
                                // recommendation: 2x the borderWidth
        borderCapStyle : 'round' // this is where the magic happens
    }
  ]
}

输出

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

Answer 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);

小提琴 - https://jsfiddle.net/ahj6u14e/

注意 - 另一种方法是bezierCurveTo使用图表对象进行覆盖。

这是有效的，因为bezierCurveTo它仅用于画线。如果你想对直线执行此操作，它将不起作用，因为lineTo它用于其他东西（轴，网格线......）

borderDash当我上次检查时，Chart.js 2.0 有一个选项（请参阅/sf/answers/2200004831/）