Chartjs X軸の下でカスタム水平線を描画する方法

Question

私はAnger2を使ってChartJSコンポーネントを操作しています。私はthis imageとしてレンダリングする方法があるかどうかを知りたいです。

基本的に、棒グラフはグリッド上に表示されます。たとえば、6月のような列バーをクリックすると、列バーの下にある正確な月に上矢印が表示されます。何か提案はありますか？前もって感謝します。

Answer 1

キャンバスのイベントonclickをキャプチャし、getElementAtEventのchartjsメソッドでどのバーがクリックされているかを確認できます。 getElementAtEventは、チャートの下にカスタムラインを描画するために必要なすべての関連情報（チャート幅、バーのx座標、ラベルなど）を提供します。

canvas.onclick = function (evt) { 
     var activePoints = myBarChart.getElementAtEvent(evt); 
     if (activePoints[0]) { 
      //draw your custom line 
     } 
    }; 

以下のスニペットには2つのキャンバスがあります。 1つはchart.jsで実際のグラフを描画し、もう1つはクリックされたラベルのテキストを含む線を描くことです。

var canvas = document.getElementById('myChart'); 
 
var data = { 
 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
    datasets: [{ 
 
     label: "My First dataset", 
 
     backgroundColor: "rgba(255,99,132,0.2)", 
 
     borderColor: "rgba(255,99,132,1)", 
 
     borderWidth: 2, 
 
     hoverBackgroundColor: "rgba(255,99,132,0.4)", 
 
     hoverBorderColor: "rgba(255,99,132,1)", 
 
     data: [65, 59, 20, 81, 56, 55, 40], 
 
    }] 
 
}; 
 
var option = { 
 
    scales: { 
 
     yAxes: [{ 
 
      stacked: true, 
 
      gridLines: { 
 
       display: true, 
 
       color: "rgba(255,99,132,0.2)" 
 
      } 
 
     }], 
 
     xAxes: [{ 
 
      gridLines: { 
 
       display: false 
 
      } 
 
     }] 
 
    } 
 
}; 
 

 
var myBarChart = Chart.Bar(canvas, { 
 
    data: data, 
 
    options: option 
 
}); 
 

 
canvas.onclick = function (evt) { 
 
    var activePoints = myBarChart.getElementAtEvent(evt); 
 
    if (activePoints[0]) { 
 
     var chart = activePoints[0]._chart; 
 
     var canvasX = document.getElementById('xAxis2'); 
 
     // set the width of the second canvas to the chart width 
 
     canvasX.width = chart.width; 
 
     var canvas2D = canvasX.getContext('2d'); 
 
     // draw the line 
 
     canvas2D.moveTo(0, 20); 
 
     canvas2D.lineTo(activePoints[0]._view.x - 10, 20); 
 
     canvas2D.lineTo(activePoints[0]._view.x, 0); 
 
     canvas2D.lineTo(activePoints[0]._view.x + 10, 20); 
 
     canvas2D.lineTo(canvasX.width, 20); 
 
     canvas2D.stroke(); 
 
     // add the label text 
 
     canvas2D.font = '12px serif'; 
 
     canvas2D.fillText('for ' + activePoints[0]._view.label, canvasX.width - 100, 15); 
 
    } 
 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script> 
 
<canvas id="myChart" width="400" height="250"></canvas> 
 
<canvas id="xAxis2" height="20"></canvas>