How can I draw dotted line using chartjs?

问题:

I would like to draw dotted line using chartjs. I did not see any options in creating dotted lines. I feel we need to extend the chartjs to support this. Can some one help me in this?

回答1:

In Chart.js 2.1+, use the borderDash option within your dataset. It takes an array of two numbers. See this codepen

回答2:

Drawing a Dotted Line

You don't need to extend the chart, but it would be cleaner to do it that way.

---

Preview

Script

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

---

Fiddle - https://jsfiddle.net/ahj6u14e/

---

Note - the alternative would be to just override bezierCurveTo using the chart object.

This works because bezierCurveTo is only used to draw the line. If you wanted to do this for straight lines it wouldn't work because lineTo is used for other stuff (axis, grid lines...)

Chart.js 2.0 had a borderDash option when I last checked (see https://stackoverflow.com/a/31428640/360067)

文章来源: How can I draw dotted line using chartjs?