Chart.jsでの積み上げ棒グラフの作成に困っています

現在Eclipseを使用し、Webシステムの開発をしています。
取得したデータからグラフ（以下グラフAとする）を作成し、グラフのデータがクリックされると別領域に押下したデータに関連するデータがグラフ（以下グラフBとする）で表示されるという仕組みを作ろうと考えています。
グラフAの表示領域に表示するグラフは積み上げ棒グラフなのですが、積み上げるデータ毎にクリックイベントを用意することができなくて困っています。
グラフを表示させる方法としてはjavascriptのChart.jsを使用しています。
Chart.jsの積み上げ棒グラフにそのような機能はあるでしょうか？
教えていただけると嬉しいです。

gh640

2018/11/16 00:21

質問させてください。お使いになっている Chart.js のバージョンは 2.x ですか？というのと、お困りになっていることは、積み上げ棒グラフで「積み上げるデータ毎にクリックイベントを用意」できない、というところだけでしょうか？その前に必要となる「積み上げ棒グラフを描くこと」「クリックイベントを用意すること」まではできてらっしゃる状態でしょうか？

mastan1117

2018/11/16 01:46

追記、修正依頼ありがとうございます。Chart.jsのバージョンは2.7.3と記述がありました。現在の状態としては、「積み上げ棒グラフの描画」については実現できていて、「クリックイベントを用意する」ということは実現できていない状態です。

gh640

2018/11/16 02:08

ご返信くださりありがとうございます。回答の方に記入させていただきましたので、続きは回答欄でご確認ください :)

行動規範の内容に同意します

回答1件

ベストアンサー

ご返信いただきありがとうございます。バージョンをお聞きしたのは、バージョン 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 の配列です、とのことです。

http://www.chartjs.org/docs/latest/general/interactions/events.html

私が試してみたところでは、上の引数 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});