コピペでOK!Chart.js の数字を3桁カンマで表示する方法

こんにちは。フリーランス・コンサルタント&エンジニアの 九保すこひ です。

現在、データをグラフ化する開発でchart.jsというJavaScriptパッケージを使っています。

このchart.js、MITライセンで配布されてるにもかかわらずとても使い勝手がいいんで、JavaScriptをで、グラフを描くといえばもはやデファクトスタンダードといってもいいんじゃないかと思うほどの出来栄えです。

しかし、ホントにいい時代になりました。
過去にも同様の開発は行ったことがあるんですけど、今のように JavaScript 全盛の時代じゃなかったんで、PHPのGDを使っているグラフを作っていたのを思い出しました(笑)

ちなみにChart.jsが初見の方は下のリンクからサンプルを見ることができますよ!

※他にもいろんなタイプのグラフに対応してます。一覧はこちら

さて、ここから本題です。

まず、chart.jsでは数字データを設定し、それがグラフになるわけですけど、実はデフォルトだと数字がまんま表示されちゃうんで、金融機関勤めをしていた私(←逃げるように転職しましたが^^;)としてはちょっと気持ち悪いわけです。

つまり、もし100万円の売上を表示したい場合、Y軸やツールチップには、

1000000円

と表示されるんですけど、いち、じゅう、ひゃく、せん・・・・・・いや、カンマふれよ(大汗)

ってなってしまいます。
なので、これを

1,000,000円

にするテクニックを紹介したいと思います。

では、実際のコードで実現方法を紹介しましょう!

1.Y軸の数字を3桁カンマ区切りにする

chart.jsにはオプションでY軸の詳しい設定ができるんですけど、その中にcallbackというオプションがあるんで、ここに文字列をカスタマイズするコードを挿入します。

(実際のコードはこちら)

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
    <script>

        var canvas = document.getElementById('canvas');
        new Chart(canvas, {
            type: 'line',
            data: {
                datasets: [
                    {
                        label: '売上',
                        data: [1000000, 7000000, 3000000]
                    }
                ],
                labels: ['前々月', '前月', '今月']
            },
            options: {
                scales: {
                    xAxes: [
                        {
                            ticks: {}
                        }
                    ],
                    yAxes: [
                        {
                            ticks: {
                                min: 0,
                                max: 10000000,
                                stepSize: 5000000,
                                callback: function(label, index, labels) { /* ここです */

                                    return label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';

                                }
                            }
                        }
                    ]
                }
            }
        });

    </script>

 実際の例はこちら

中身としては、コールバックに第一引数としてY軸の数字がやってくるんで、これを正規表現を使って、3桁ずつカンマで区切るという流れになっています。

また、このコールバックの中で「円」や「%」「件」などの単位を追加することもできます。
お好みに合わせて変更してみてください。

2.ツールチップの数字を3桁カンマ区切りにする

これも基本的なやりかたは一緒ですけど、設定する場所がtooltipsという場所になります。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
    <script>

        var canvas = document.getElementById('canvas');
        new Chart(canvas, {
            type: 'line',
            data: {
                datasets: [
                    {
                        label: '売上',
                        data: [1000000, 7000000, 3000000]
                    }
                ],
                labels: ['前々月', '前月', '今月']
            },
            options: {
                tooltips: { /* ここです */
                    callbacks: {
                        label: function(tooltipItem, data){

                            return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';

                        }
                    }
                }
            }
        });

    </script>

実際の例はこちら

3.コピペ用、完全版(Y軸&ツールチップを3桁カンマ区切りにする)

Y軸とツールチップを両方とも3桁カンマ区切りにするコードはこちら。
コピペ用です。

    
    <canvas id="canvas" width="600" height="400"></canvas>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
    <script>

        var canvas = document.getElementById('canvas');
        new Chart(canvas, {
            type: 'line',
            data: {
                datasets: [
                    {
                        label: '売上',
                        data: [1000000, 7000000, 3000000]
                    }
                ],
                labels: ['前々月', '前月', '今月']
            },
            options: {
                scales: {
                    xAxes: [
                        {
                            ticks: {}
                        }
                    ],
                    yAxes: [
                        {
                            ticks: {
                                min: 0,
                                max: 10000000,
                                stepSize: 5000000,
                                callback: function(label, index, labels) {

                                    return label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';

                                }
                            }
                        }
                    ]
                },
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data){

                            return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';

                        }
                    }
                }
            }
        });

    </script>

ちなみに

開発者としては、正規表現で3桁カンマ区切りにする部分が2ヵ所重複してるんで、関数などにして一つにもまとめておくことをおすすめします。(というかネイティブのJavaScriptで関数を提供してくれたら嬉しいかなーなんて、楽しすぎですかね^o^;)

以上、個人的にもおすすめできるchart.jsのカスタマイズ方法でした。

ではでは〜!

このエントリーをはてなブックマークに追加       follow us in feedly  
開発のご依頼お待ちしております
開発のご依頼はこちらから: お問い合わせ
どうぞよろしくお願いいたします! by 九保すこひ