Chart.js – 绘制水平线

我想用Chart.js在图表中画一条水平线。 但我无法做到这一点。

我读过这个问题 – Chart.js – 绘制一个任意的垂直线 – 但我不能转换代码绘制水平线不垂直。

我希望你能帮助我（特别是potatopeelings :)）。

Answer 1

这是jQuery代码来绘制一条水平线。

var data = { labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"], datasets: [{ data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1] }] }; var ctx = document.getElementById("LineWithLine").getContext("2d"); Chart.types.Line.extend({ name: "LineWithLine", initialize: function () { Chart.types.Line.prototype.initialize.apply(this, arguments); }, draw: function () { Chart.types.Line.prototype.draw.apply(this, arguments); var point = this.datasets[0].points[this.options.lineAtIndex] var scale = this.scale console.log(this); // draw line this.chart.ctx.beginPath(); this.chart.ctx.moveTo(scale.startPoint+12, point.y); this.chart.ctx.strokeStyle = '#ff0000'; this.chart.ctx.lineTo(this.chart.width, point.y); this.chart.ctx.stroke(); // write TODAY this.chart.ctx.textAlign = 'center'; this.chart.ctx.fillText("TODAY", scale.startPoint + 35, point.y+10); } }); new Chart(ctx).LineWithLine(data, { datasetFill : false, lineAtIndex: 2 }); 

http://jsfiddle.net/7a4hhzge/455/

这是基于用于绘制任意垂直线的代码 ，它可能不是完美的，但你应该能够调整它以适应你的需要。

Answer 2

没有任何额外的代码，我设法通过添加一个新的条目作为一个数据集与这些选项：

只需用数据集的大小以及该行代表的值来replace即可。

 { data: Array.apply(null, new Array(<length>)).map(Number.prototype.valueOf, <value>), fill: false, radius: 0, backgroundColor: "rgba(0,0,0,0.1)" } 

0的半径会以某种方式隐藏点和填充：false将使其显示为一条线。

Answer 3

如果你需要许多具有一定Y值的行，试试这个代码

 var data = { labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"], datasets: [{ data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1] }] }; var ctx = document.getElementById("LineWithLine").getContext("2d"); Chart.types.Line.extend({ name: "LineWithLine", draw: function () { Chart.types.Line.prototype.draw.apply(this, arguments); var lines = this.options.limitLines; for (var i = lines.length; --i >= 0;) { var xStart = Math.round(this.scale.xScalePaddingLeft); var linePositionY = this.scale.calculateY(lines[i].value); this.chart.ctx.fillStyle = lines[i].color ? lines[i].color : this.scale.textColor; this.chart.ctx.font = this.scale.font; this.chart.ctx.textAlign = "left"; this.chart.ctx.textBaseline = "top"; if (this.scale.showLabels && lines[i].label) { this.chart.ctx.fillText(lines[i].label, xStart + 5, linePositionY); } this.chart.ctx.lineWidth = this.scale.gridLineWidth; this.chart.ctx.strokeStyle = lines[i].color ? lines[i].color : this.scale.gridLineColor; if (this.scale.showHorizontalLines) { this.chart.ctx.beginPath(); this.chart.ctx.moveTo(xStart, linePositionY); this.chart.ctx.lineTo(this.scale.width, linePositionY); this.chart.ctx.stroke(); this.chart.ctx.closePath(); } this.chart.ctx.lineWidth = this.lineWidth; this.chart.ctx.strokeStyle = this.lineColor; this.chart.ctx.beginPath(); this.chart.ctx.moveTo(xStart - 5, linePositionY); this.chart.ctx.lineTo(xStart, linePositionY); this.chart.ctx.stroke(); this.chart.ctx.closePath(); } } }); new Chart(ctx).LineWithLine(data, { datasetFill : false, limitLines: [ { label: 'max', value: 17, color: 'rgba(255, 0, 0, .8)' }, { label: 'min', value: 1 }, { value: 7, color: 'rgba(0, 255, 255, .8)' } ], }); 

http://jsfiddle.net/vsh6tcfd/3/

Answer 4

基于dFelinger消息，我制作了一个新的字符types，在折线图上绘制了一条平均线。 这是代码，只需复制并调用一个名为“lineWithAverage”的新types的新图表即可工作CHARTJS 2

  Chart.controllers.lineWithAverage = Chart.controllers.line.extend({ initialize: function () { Chart.controllers.line.prototype.initialize.apply(this, arguments); }, draw: function () { Chart.controllers.line.prototype.draw.apply(this, arguments); var scale = this.scale var sum = 0; this.getDataset().data.forEach(function(value) { sum = sum + value; }); var average = sum / this.getDataset().data.length; var averageCoord = this.calculatePointY(average); // draw line this.chart.chart.canvas.ctx = this.chart.chart.canvas.getContext('2d'); this.chart.chart.canvas.ctx.beginPath(); this.chart.chart.canvas.ctx.moveTo(0, averageCoord); this.chart.chart.canvas.ctx.strokeStyle = '#979797'; this.chart.chart.canvas.ctx.lineTo(this.chart.chart.width, averageCoord); this.chart.chart.canvas.ctx.stroke(); } });