棒グラフに水平線を描く方法Chartjs

Question

私は棒グラフを描く次のスクリプトを持っており、特定のy点に水平線を追加したいと思います。私のソースコードは、なし

私は、次の例linkをしようとしていたと私はちょうどChart.types.Bar.extend でChart.types.Line.extend置換が、結果として、私はcan not read property extend of undefined を得ていることはそう誰かがそのリンクで適切に上記の例を実装するために助けることができるか、別の決定を示唆して

水平線

var ctx = document.getElementById("myChart"); 
     var myChart = new Chart(ctx, { 
      type: 'bar', 
      data: { 
       labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
       datasets: [{ 
        label: '# of Votes', 
        data: [12, 19, 3, 5, 2, 3], 
        backgroundColor: [ 
         'rgba(255, 99, 132, 0.2)', 
         'rgba(54, 162, 235, 0.2)', 
         'rgba(255, 206, 86, 0.2)', 
         'rgba(75, 192, 192, 0.2)', 
         'rgba(153, 102, 255, 0.2)', 
         'rgba(255, 159, 64, 0.2)' 
        ], 
        borderColor: [ 
         'rgba(255,99,132,1)', 
         'rgba(54, 162, 235, 1)', 
         'rgba(255, 206, 86, 1)', 
         'rgba(75, 192, 192, 1)', 
         'rgba(153, 102, 255, 1)', 
         'rgba(255, 159, 64, 1)' 
        ], 
        borderWidth: 1 
       }] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero:true 
         }, 


        }] 
       }, 

      } 
     }); 

Answer 1

あなたはそれを行うためにChart.js pluginsを使用することができます。プラグインを使用すると、beforeUpdateやafterDrawなどの特定のイベントを処理しても、実装が容易ですしましょう：

Chart.pluginService.register({ 
    afterDraw: function(chart) { 
     // Code here will be triggered ... after the drawing 
    } 
}); 

それはすべてがされた後、あなたは簡単なcanvas要素であなたの希望のように単純にラインを描くことで行う簡単な方法あなたのグラフに描かれている、lineToメソッドを使用します。

---

は、ここでは次のようにどのように見えるかの小さな例（ and its related code）です：@tektivからの回答では

Answer 2

、あなたのyAxisは常に0から始まります。

あなたのデータを自動的にこれがyAxe.minを使用せずに作業例ですので、 あなたは（beginAtZero:falseで、例えば）それを使用することができますし、yAxeスケール。

ラインプラグイン：

var canvas = document.getElementById("barCanvas"); 
var ctx = canvas.getContext('2d'); 

Chart.pluginService.register({ 
    afterDraw: function(chart) { 
     if (typeof chart.config.options.lineAt != 'undefined') { 
      var lineAt = chart.config.options.lineAt; 
      var ctxPlugin = chart.chart.ctx; 
      var xAxe = chart.scales[chart.config.options.scales.xAxes[0].id]; 
      var yAxe = chart.scales[chart.config.options.scales.yAxes[0].id]; 
      ctxPlugin.strokeStyle = "red"; 
      ctxPlugin.beginPath(); 
      lineAt = yAxe.getPixelForValue(lineAt); 
      ctxPlugin.moveTo(xAxe.left, lineAt); 
      ctxPlugin.lineTo(xAxe.right, lineAt); 
      ctxPlugin.stroke(); 
     } 
    } 
}); 

チャート：

var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [12, 19, 3, 5, 2, 3], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)', 
       'rgba(153, 102, 255, 1)', 
       'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     lineAt: 14, 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:false 
       } 
      }] 
     }, 
    } 
});