ChartJS v2で動的直線を描く方法

Question

Chart.jsが新しくリリースされました。これはもう少し直感的です。しかし、私はV1で設計されたいくつかのコードを試していますが、それは機能しませんが、これを深く理解することは私をはるかに超えています - 私が使用しようとしているコードは最後の投稿です - http://yuluer.com/page/dbajceij-chart-js-draw-horizontal-line.shtml

My code for折れ線グラフは次のようになります。

誰もV2でカスタムダイナミック直線を得ることができましたか？

Answer 1

は、サンプルがデータ値「lineAtIndex」で設定x軸インデックスで垂直線が描画挙げChart.js 2.0 - vertical lines

を参照してください。水平線を描画するには、サンプルに以下の方法を適応させることができます：

var originalLineDraw = Chart.controllers.line.prototype.draw; 

Chart.helpers.extend(Chart.controllers.line.prototype, { 
    draw: function() { 

     originalLineDraw.apply(this, arguments); 

     var chart = this.chart; 
     var ctx = chart.chart.ctx; 

     var lineAtValue = chart.config.data.lineAtValue; 
     if (lineAtValue) { 

      var xaxis = chart.scales['x-axis-0']; 
      var yaxis = chart.scales['y-axis-0']; 

      ctx.save(); 
      ctx.beginPath(); 
      ctx.moveTo(xaxis.left, yaxis.getPixelForValue(lineAtValue)); 
      ctx.strokeStyle = '#ff0000'; 
      ctx.lineTo(xaxis.right, yaxis.getPixelForValue(lineAtValue)); 
      ctx.stroke(); 
      ctx.restore(); 

     } 
    } 
}); 

の構成は次のようになります。

var chart = new Chart(ctx, { 
    type: 'your-type', 
    data: { 
     labels: [your-labels], 
     datasets: [...], 
     lineAtValue: 20000 
    }, 
    options: defaultOptions 
});