Chart.js 2.0で水平線を描く

Question

Chart.js v2.0の拡張方法を教えてもらえますか？あなたは2つのオプションを持っているchart.jsでhttp://jsfiddle.net/vsh6tcfd/3/

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

Chart.helpers.extend(Chart.controllers.bar.prototype, { 
    draw: function() { 
    originalLineDraw.apply(this, arguments); 

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

    var index = chart.config.data.lineAtIndex; 
    if (index) { 
     var xaxis = chart.scales['x-axis-0']; 
     var yaxis = chart.scales['y-axis-0']; 

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

var config = { 
    type: type, 
    data: jQuery.extend(true, {}, data), 
    options: this.chartdata.options, 
    lineAtIndex: 2 
}; 

new Chart(ctx, config); 

Answer 1

オプション

：私は、チャート内のいくつかの水平線を描画するために似た何かが必​​要。

1. ミックスチャートタイプ（Example Here）を作成することができます。これにより、線グラフを追加して線を作成することができます。
2. プラグインを作成できます（下記の例を参照）。

オプション2を使用すると、行の外観をより詳細に制御できるため、お勧めします。

修正今supports plugins

demo of the plugin

Chart.js。これは、あなたがあなたのチャートに任意の機能を追加することができます！

プラグインを作成するには、イベントが発生した後にコードを実行し、必要に応じてチャート/キャンバスを変更する必要があります。 次のコードは、あなたに良い出発点を与える必要があります：提供フィドルで

var horizonalLinePlugin = { 
    afterDraw: function(chartInstance) { 
    var yValue; 
    var yScale = chartInstance.scales["y-axis-0"]; 
    var canvas = chartInstance.chart; 
    var ctx = canvas.ctx; 
    var index; 
    var line; 
    var style; 

    if (chartInstance.options.horizontalLine) { 
     for (index = 0; index < chartInstance.options.horizontalLine.length; index++) { 
     line = chartInstance.options.horizontalLine[index]; 

     if (!line.style) { 
      style = "rgba(169,169,169, .6)"; 
     } else { 
      style = line.style; 
     } 

     if (line.y) { 
      yValue = yScale.getPixelForValue(line.y); 
     } else { 
      yValue = 0; 
     } 

     ctx.lineWidth = 3; 

     if (yValue) { 
      ctx.beginPath(); 
      ctx.moveTo(0, yValue); 
      ctx.lineTo(canvas.width, yValue); 
      ctx.strokeStyle = style; 
      ctx.stroke(); 
     } 

     if (line.text) { 
      ctx.fillStyle = style; 
      ctx.fillText(line.text, 0, yValue + ctx.lineWidth); 
     } 
     } 
     return; 
    } 
    } 
}; 
Chart.pluginService.register(horizonalLinePlugin);