Chart.js の円グラフでそれぞれの領域をクリックした際のイベント処理を定義する

Chart.js の円グラフでそれぞれの領域をクリックした際のイベント処理を定義する方法。

まずは option にクリック時のイベントハンドラを登録。

var myChart = new Chart(ctx, {
    //グラフの種類
    type: 'doughnut',
    //データの設定
    data: {
        //データ項目のラベル
        labels: ["項目1", "項目2", "項目3"],
        //データセット
        datasets: [{
            //背景色
            backgroundColor: [
                "#808FCD",
                "#CCCCCC",
                "#DDDDDD",
            ],
            //背景色(ホバーしたとき)
            hoverBackgroundColor: [
                "#A0AFED",
                "#DDDDDD",
                "#EEEEEE"
            ],
            //グラフのデータ
            data: [20, 80, 70]
        }]
    },
    options: {
        // クリック時のイベントハンドラの指定
        onClick: onClickChart
    }
});

イベントハンドラは以下のように二つ引数を指定すると、最初の引数にイベントの詳細が、２番目にデータの詳細が入ってくる。グラフに表示されているすべてのデータもこのなかに入ってくるが、どの領域をクリックしたかの判定は _index プロパティをみればよい。

function onClickChart(event, data) {
    var index = data[0]._index;
    switch (index) {
    case 0 :
        // １番最初の領域クリック時
        break;
    case 1 :
        // ２番目の領域クリック時
        break;
    case 2 :
        // ３番目の領域クリック時
        break;
}

さらに項目名なども取得できる。たとえば「項目1」の領域をクリックした場合以下のようにグラフから情報を取得することができる。

var clickData = data[0];
clickData._index === 0
clickData._view.label === '項目1'

// この中にチャートのデータ一式が入っている
clickData.tooltip._data

公式ドキュメント