v2のchart.jsのグラフに水平線を描く

Question

chart.jsを使って折れ線グラフを描きました。ラベルとデータセットについては、データベースから値を取得しています。私はchart.jsとその非常に強力なライブラリを初めて使いましたが、それを完全に理解することはできません。倍数の水平線を描きたい。同様に、データセットの平均、標準偏差、最小値と最大値の場合私はstackoverflowでここで質問を試みたが、これらはエラーを出すか、私は仕事を理解することができないかもしれない。これは、あなたが簡単に（あなたにエラーを与えている古いアプローチ）を手動でキャンバスのピクセルをレンダリングすると混乱することなく、あなたのチャート上に線を描画するためにchart.js annotation pluginを使用することができ、私のchart.jsコード

function display_graph(id, label, data) { 
var ctx = document.getElementById(id); 
var data = { 
    labels: data.labels, 
    datasets: [ 
     { 
      label: label, 
      fill: false, 
      lineTension: 0.1, 
      backgroundColor: "rgba(75,192,192,0.4)", 
      borderColor: "rgba(75,192,192,1)", 
      borderCapStyle: 'butt', 
      borderDash: [], 
      borderDashOffset: 0.0, 
      borderWidth: 1, 
      borderJoinStyle: 'miter', 
      pointBorderColor: "rgba(75,192,192,1)", 
      pointBackgroundColor: "#fff", 
      pointBorderWidth: 1, 
      pointHoverRadius: 5, 
      pointHoverBackgroundColor: "rgba(75,192,192,1)", 
      pointHoverBorderColor: "rgba(220,220,220,1)", 
      pointHoverBorderWidth: 2, 
      pointRadius: 1, 
      pointHitRadius: 10, 
      data: data.assay_value, 
      spanGaps: false 
     } 
    ] 
}; 

//options 
var options = { 
    responsive: true, 
    title: { 
     display: true, 
     position: "top", 
     text: label, 
     fontSize: 18, 
     fontColor: "#111" 
    }, 
    legend: { 
     display: true, 
     position: "bottom", 
     labels: { 
      fontColor: "#333", 
      fontSize: 16 
     } 
    } 
}; 
var Blanks_Chart=null; 
Blanks_Chart = new Chart(ctx, { 
    type: 'line', 
    data: data, 
    options: options 
});} 

Answer 1

です。プラグインはchart.jsと同じチームによって作成/サポートされており、chart.js docsに記載されています。

グラフに線を作成する方法を示すexample codepenです。

プラグインを追加したら、チャート設定でプロパティを設定するだけです。ここに例があります。

var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
    labels: ["January", "February"], 
    datasets: [{ 
     label: 'Dataset 1', 
     borderColor: window.chartColors.blue, 
     borderWidth: 2, 
     fill: false, 
     data: [2, 10] 
    }] 
    }, 
    options: { 
    responsive: true, 
    title: { 
     display: true, 
     text: 'Chart.js Draw Line On Chart' 
    }, 
    tooltips: { 
     mode: 'index', 
     intersect: true 
    }, 
    annotation: { 
     annotations: [{ 
     type: 'line', 
     mode: 'horizontal', 
     scaleID: 'y-axis-0', 
     value: 5, 
     borderColor: 'rgb(75, 192, 192)', 
     borderWidth: 4, 
     label: { 
      enabled: false, 
      content: 'Test label' 
     } 
     }] 
    } 
    } 
});