グラフJs V2描画水平バー（平均）垂直バー上

Question

垂直バー（グリーンバー）上に単一のバーを描きたい。またannotationが、その動作していないを使用してみました、私は線を描画するために、私はいくつかのコードを見つけ

4角

にチャートJS V2を使用していますが、その私が使用角度4.

で働いていません。 コマンドは、注釈を追加する：NPMインストールchartjs-プラグイン注釈以下--save

は垂直バーを描画するために正常に動作し、私のコードです。誰も私にそれの上に水平線を描くのを助けることができますか？

回答：

その後import 'chartjs-plugin-annotation'npm install chartjs-plugin-annotation --save

をインストールします。

this.ctx = document.getElementById("myChart"); 
    this.myChart = new Chart(this.ctx, { 
     type: 'bar', 
     data: { 
      labels: this.barData.getLabels(), 
      datasets: [{ 
       label: this.barData.actualLegendLabel, 
       data: this.barData.getLineData(), 
       backgroundColor: this.backgroundColorBarOne, 
       borderColor: [ 
        'rgba(81,117, 194,1)', 
       ]}] 
     }, 
     options: { 
      scales: { 
       responsive: true, 
       scaleBeginAtZero: false, 
       barBeginAtOrigin: true, 
       yAxes: [{ 
        ticks: { 
         beginAtZero: true 
        }, 
        gridLines: { 
         display: false 
        } 
       }], 
       xAxes: [{ 
        ticks: { 
         beginAtZero: true 
        }, 
        gridLines: { 
         display: false 
        } 
       }] 
      }, 
      legend: { 
       cursor: "line", 
       position: 'top', 
       labels: { 
        fontSize: 10,      
       } 
      }, 
      layout: { 
       padding: { 
        left: 3, 
        right: 3, 
        top: 5, 
        bottom: 5 
       } 
      }, annotation: { 
       annotations: [{ 
        drawTime: 'afterDraw', // overrides annotation.drawTime if set 
        id: 'a-line-1', // optional 
        type: 'line', 
        mode: 'horizontal', 
        scaleID: 'y-axis-0', 
        value: '25', 
        borderColor: 'red', 
        borderWidth: 2,   
        // Fires when the user clicks this annotation on the chart 
        // (be sure to enable the event in the events array below). 
        onClick: function(e) { 
         // `this` is bound to the annotation element 
        } 
       }] 
      } 
     } 
    });  

Answer 1

次の例のように、あなたはチャート上でみたいものを描くことができ、あなたのチャートに緑の線をプラグインを追加することができます。 the documentation for ChartJSのプラグインについて読むことができます。緑色の線が縦線の上に表示されるようにするには、afterDrawメソッドを使用する必要があります。

あなたはプラグインのセットアップを設定したら、これを達成するための手順は次のようになります。

1. あなたのチャートのすべてのバーの平均を計算（バーの数によってそれらを合計し、除算）
2. 前の計算から：線のY位置を決定し、それに基づいてキャンバス上に緑の線を描画します。

ブラウザキャンバスの仕組みが初めての方は、CanvasRenderingContext2Dをご覧ください。