Chart.js - draw horizontal line

问题:

I would like to draw a horizontal line in a chart using Chart.js. But I'm not able to do it.

I've read this question - - but I can't transform the code for drawing horizontal lines not vertical.

I hope you can help me (especially potatopeelings :)).

回答1:

Here is the jquery code to draw a horizontal line.

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/

This is based off of the code used to draw an arbitrary vertical line, it may not be perfect but you should be able to adjust it to fit your needs.

回答2:

Without any additional code, I managed to draw a line by adding a new entry as a dataset with these options :

Just replace with the size of your dataset, and with the value that the line represents.

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

The radius of 0 will somehow hide the dots and the fill: false will make it appear as a line.

回答3:

If you need many lines with certain Y value, try this code

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/

回答4:

Based on dFelinger message I made a new char type that draws an average line on the line chart. Here's the code, just copy and call a new chart with the new type called 'lineWithAverage' WORKS ONLY FOR 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();         }     }); 

文章来源: Chart.js - draw horizontal line