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