如何使用chartjs绘制虚线？

Question

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

Answer 1

在Chart.js 2.1+中，使用数据集中的borderDash选项。它需要两个数字的数组。 See this codepen

Answer 2

绘制虚线

您不需要扩展图表，但这样做会更清晰。

预览

<强>脚本

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用于其他东西（轴，网格线......）

我上次查看时，Chart.js 2.0有一个borderDash选项（参见https://stackoverflow.com/a/31428640/360067）

Answer 3

对于虚线，请使用sta= json.loads(aircraft.stations).get('Stations'); stations = zip(sta.get('name'),sta.get('short'),sta.get('values'),sta.get('type')); 和borderDash。下面的示例创建一条虚线（直径3px）：

borderCapStyle

输出

输出（更好的对比演示）