chart.js之 - 绘制水平线

Question

我想绘制一条水平线使用Chart.js图表英寸但我无法做到。

我读过这个问题 - Chart.js — drawing an arbitrary vertical line - 但我不能变换代码绘制水平线不垂直。

我希望你能帮助我（尤其是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/

这是基于关闭的the code used to draw an arbitrary vertical line，它可能不是完美的，但你应该能够对其进行调整，以满足您的需求。

Answer 2

如果你需要多行有一定的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 3

无需任何额外的代码，我设法通过添加新条目与这些数据集画一条线选项：

只需用数据集的大小代替，并与该行代表的价值。

{ 
    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 4

基于dFelinger消息我作出绘制线图上的平均线新的字符类型。这里的代码，只需复制并调用一个新的图表称为'lineWithAverage'工程仅适用于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(); 
     } 
    });