https://kojirooooocks.hatenablog.com/entry/2023/04/16/200000

はじめに

こんばんは。

最近 Chart.jsを触ってるのですが、少しだけ迷って調べた部分があったので、備忘録しておきます。

本題

サンプルのコード

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js"></script>  
    </head>
    <body>
        <div>
            <canvas id="chart"></canvas>
        </div>
        <script>
            var ctx = document.getElementById('chart');
            var option = {
                type: 'line',
                data: {
                    labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                    datasets: [
                        {
                            label: '友達 A', 
                            data: [10, 20, 30, 40, 50, 70, 90],
                        }, 
                        {
                            label: '友達 B',
                            data: [30, 10, 40, 50, 100, 20, 60],
                        }, 
                        {
                            label: '友達 C',
                            data: [100, 80, 0, 20, 50, 40, 70],
                        }
                    ],
                },
                options: {
                    y: {
                        min: 0,
                        max: 100,
                    },
                    plugins: {
                        legend: {
                            position: 'bottom',
                        },
                    }
                },
            };

            var myChart = new Chart(ctx, option);
        </script>
    </body>
</html>

Chart.jsの凡例はクリックすると対応しているチャートの表示・非表示を行えます。

gyazo.com

この凡例をクリックした際に処理を追加したい場合、 onClick オプションを追加することで実現できます。

options: {
    y: {
        min: 0,
        max: 100,
    }
    plugins: {
        legend: {
            position: 'bottom',
            onClick: () => {
                console.log('click!!')
            }
        },
    }
},

ただ上記のコードのように追加しちゃうと、通常の凡例の動きができなくなり、追加というより処理の上書きになってしまいます。

gyazo.com

上書きではなく追加にする場合は以下のように対応する必要があります。

ついでにどの凡例をクリックしたかを取ってみます。

plugins: {
    legend: {
        position: 'bottom',
        onClick: (e, legendItem, legend) => {
            console.log(`${legendItem.text} Click!!`)
            const index = legendItem.datasetIndex;
            const ci = legend.chart;
            if (ci.isDatasetVisible(index)) {
                ci.hide(index);
                legendItem.hidden = true;
            } else {
                ci.show(index);
                legendItem.hidden = false;
            }
        }
    },
}

gyazo.com

終わりに

Chart.js機能が多すぎて、ドキュメント量も多いので、もしかしたらもっと簡単にできる方法あるかもです...

最近結構TypeScriptやっているので、がっつりTS案件をやって、TS力高めたいなと思った今日このごろです。

現場からは以上です。