このブログエントリの続きです：
Chart.js のクリックイベントハンドラ


JavaScript で各種グラフを便利・簡単につくれる Chart.js のカスタマイズとして、アイテムをクリックした時のイベントをハンドリングする方法を上記で紹介しました。今回はその応用として「クリックしたアイテムがどれかわかるように視覚化する」カスタマイズです。

具体例としてはこういう感じを想定しています。たとえば普通に棒グラフが描かれているとします：
2019110401


この左から２番目の棒をクリックしようとしているものとします。画面上ではマウスホバーまでしているので、左から２番目の棒の上にツールチップが表示されています：
2019110402


そしてこの左から２番目の棒をクリックした時に「ここがクリックされた」ことを明示することが目的です。下の例では左から２番目の棒のエリアを赤枠で囲って強調されるようにしています：
2019110403


具体的なコード例は以下になります。どの棒がクリックされたか、については click イベントハンドリングを行っていますが、そのあたりの詳細は前回のエントリを参照してください：
<html>
<head>
<meta charset="utf8"/>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>

<script>
$(function(){
  var data_labels = [ 0, 1, 2, 3, 4 ];
  var data = [ 1, 2, 4, 3, 0 ];

  var ctx1 = document.getElementById( 'myChart1' );
  var graph1 = {
    type: 'bar',
    data: {
      labels: data_labels,
      datasets: [{
        label: 'A',
        borderWidth: 1,
        backgroundColor: "#14c759",
        borderColor: "#14c759",
        data: data
      }]
    },
    options: {
      title: {
        display: true,
        text: 'クリックイベントハンドリング例',
        padding: 3
      },
      scales: {
        xAxes: [{
          categoryPercentage: 0.4
        }],
        yAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: ''
          }
        }]
      },
      tooltips: {
        mode: 'label'
      }
    }
  };
  var myChart1 = new Chart( ctx1, graph1 );

  //. クリックイベント
  ctx1.addEventListener( 'click', function( event ){
    var item = myChart1.getElementAtEvent( event );
    if( item.length == 0 ){
      return;
    }
    item = item[0];

    var idx = item._index;        //. 左から何番目のアイテムがクリックされたか？
    var ctx = item._chart.ctx;    //. クリックされたアイテムのチャート描画部分のコンテキスト

    //. ctx に対して、idx 番目のアイテムがある箇所を強調表示する。
    //. 以下の例では idx 番目のアイテムがあるエリアを赤枠で囲って強調している

    //. 描画する矩形の開始地点座標と、矩形の幅・高さを求める
    var x_right = item._xScale.chart.chartArea.right;
    var x_left = item._xScale.chart.chartArea.left;
    var x_width = ( x_right - x_left ) / data_labels.length;
    var y_height = item._yScale.height;
    var y_top = item._yScale.top;
    var draw_x0 = x_width * idx;

    //. strokeRect 関数で対象エリアに矩形を描画する
    ctx.lineWidth = 5;
    ctx.strokeStyle = 'red';
    ctx.strokeRect( draw_x0 + x_left, y_top, x_width, y_height );
  });
});
</script>
</head>
<body>

<div class="container">
  <canvas id="myChart1" style="position:relative; width:800; height:200"></canvas>
</div>

</body>
</html>

簡単に解説すると、クリックしたアイテムを item 変数に入れた後に item._chart.ctx を参照して（チャートが描画される Canvas の）コンテキスト変数を取得する、というのがミソです。これが取得できてしまえば、後はここに Canvas の機能や関数を使って自由に描画すればいいわけで、上の例では矩形を指定して色を付けるようにしています。



タグ ：
#canvas
#chart.js
#javascript