ご返信いただきありがとうございます。バージョンをお聞きしたのは、バージョン 1.x と 2.x で書き方が異なるらしいためでした。
2.x であれば、クリックイベントハンドラのセットは、 options
に onClick
という要素を追加すればできるようです:
js
1var achart = new Chart(ctx, {
2 // その他要素省略
3 options: {
4 onClick: function (event, activeElements) {
5 alert('クリックされました');
6 },
7 },
8});
公式のドキュメントの onClick
の説明に次のように書かれています。
Called if the event is of type 'mouseup' or 'click'. Called in the context of the chart and passed the event and an array of active elements
引数は event オブジェクトとアクティブ element の配列です、とのことです。
私が試してみたところでは、上の引数 activeElements
には複数の element が渡されてきてしまうので、その中からクリックされたデータセットだけを特定したい場合は、コールバック関数の中で getElementAtEvent()
メソッドを使って取得する必要があるのかなと思います(これは「積み上げるデータ毎にクリックイベントを用意すること」を実現するために必要と思い説明させていただいています)。
サンプル:
js
1var achart = new Chart(ctx, {
2 options: {
3 onClick: function (event, activeElements) {
4 if (activeElements.length) {
5 var element = this.getElementAtEvent(event);
6 var index = element[0]._index;
7 var datasetIndex = element[0]._datasetIndex;
8
9 // 全体のラベルを表示
10 console.info(this.data.labels[index]);
11
12 // データセットのラベルを表示
13 console.info(this.data.datasets[datasetIndex].label);
14 }
15 },
16 },
17});
別のグラフ(「グラフ B 」)とひもづけるところについてはよろしくやっていただくと特に問題は無いのではないかと思います。
少し長くなったので Gist に置きましたが、動くサンプルも作ってみましたのでご参考になさってください: