JavaScriptライブラリChart.jsでグラフの描写する方法

JavaScriptでグラフを描写する必要があり、普段はHighchartを使用していたものの、ライセンスの問題で商用サイト可のものを使用したかった。Chart.jsが有名っぽいので使用方法をメモ。

公式サイト等

公式サイト

https://www.chartjs.org/

リファレンス

https://misc.0o0o.org/chartjs-doc-ja/

https://www.chartjs.org/docs/latest/samples/information.html

サンプル

https://taitan916.info/sample/chart.js/

準備

以下JSファイルを読み込んでおく。

<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<script src="//github.com/nagix/chartjs-plugin-colorschemes/releases/download/v0.2.0/chartjs-plugin-colorschemes.min.js"></script>

異なるバージョンを使用する場合は以下から選択する。

https://cdnjs.com/libraries/Chart.js

ソース

折れ線グラフ

<canvas id="graph_line" class="graph"></canvas>

<script>
var ctx = document.getElementById("graph_line").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['1月', '2月', '3月', '4月', '5月'],
        datasets: [
            {
                data: [35, 20, 30, 25, 45]
            }
        ]
    },
    options: {
        title: {
            display: true,
            text: '折れ線グラフ'
        },
        legend: {
            display: false,
        },
        scales: {
            yAxes: [
                {
                    ticks: {
                        beginAtZero: true
                    },
                },
            ]
        },
        plugins: {
            colorschemes: {
                scheme: 'brewer.Paired12'
            }
        }
    }
});
</script>

棒グラフ

<canvas id="graph_bar" class="graph"></canvas>

<script>
var ctx = document.getElementById("graph_bar").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['1月', '2月', '3月', '4月', '5月'],
        datasets: [
            {
                data: [35, 20, 30, 25, 45]
            }
        ]
    },
    options: {
        title: {
            display: true,
            text: '棒グラフ'
        },
        legend: {
            display: false,
        },
        scales: {
            yAxes: [
                {
                    ticks: {
                        beginAtZero: true
                    },
                },
            ]
        },
        plugins: {
            colorschemes: {
                scheme: 'brewer.Paired12'
            }
        }
    }
});
</script>

円グラフ

<canvas id="graph_pie" class="graph"></canvas>

<script>
var ctx = document.getElementById("graph_pie").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['1月', '2月', '3月', '4月', '5月'],
        datasets: [
            {
                data: [35, 20, 30, 25, 45]
            }
        ]
    },
    options: {
        title: {
            display: true,
            text: '円グラフ'
        },
        plugins: {
            colorschemes: {
                scheme: 'brewer.Paired12'
            }
        }
    }
});
</script>

棒グラフ&折れ線グラフ

<canvas id="graph_bar_line" class="graph"></canvas>

<script>
var ctx = document.getElementById("graph_bar_line").getContext('2d');
var myChart = new Chart(ctx, {
    type: "bar",
    data: {
        labels: ['1月', '2月', '3月', '4月', '5月'],
        datasets: [
            {
                type: "line",
                label: "金額",
                data: [35, 20, 30, 25, 45],
                yAxisID: "y-axis-total"
            },
            {
                label: "商品数",
                data: [2, 8, 4, 3, 11],
                yAxisID: "y-axis-num"
            },
        ]
    },
    options: {
        title: {
            display: true,
            text: "棒グラフ&折れ線グラフ"
        },
        plugins: {
            colorschemes: {
                scheme: 'brewer.Paired12'
            }
        },
        scales: {
            yAxes: [
                {
                    id: "y-axis-num",
                    type: 'linear',
                    display: true,
                    position: "left",
                    ticks: {
                        beginAtZero: true
                    },
                    scaleLabel: {
                        display: true, 
                        labelString: "商品数",
                    }, 
                },
                {
                    id: "y-axis-total",
                    type: 'linear',
                    display: true,
                    position: "right",
                    ticks: {
                        beginAtZero: true
                    },
                    scaleLabel: {
                        display: true, 
                        labelString: "金額",
                    }, 
                }
            ]
        }

    }
});
</script>

その他

各種グラフの色設定

グラフの色や背景色は本来であれば指定しなければならない。しかしながらそれは非常に面倒くさい上、データの種類が動的に変わる場合は設定するのが難しい。そのため自動で設定できる方法が無いか探したところプラグインを導入することで解決できた。

まず以下プラグインを読み込む。

<script src="//github.com/nagix/chartjs-plugin-colorschemes/releases/download/v0.2.0/chartjs-plugin-colorschemes.min.js"></script>

そしてoptionに以下を追記する。

plugins: {
    colorschemes: {
        scheme: 'brewer.Paired12'
    }
},

目盛りを0から開始する

デフォルトのままで棒グラフや折れ線グラフを表示させた場合、表示するデータの最小値＝目盛りの最小値となり見栄えがよろしくない。optionに以下を追記することで解決した。

scales: {
    yAxes: [
        {
            ticks: {
                beginAtZero: true
            },
        },
    ]
},

所感

特殊なことをしないのであればChart.jsで対応できそうに思われる。また日本語ドキュメントが用意されているのが助かる。

あとGoogle Chartsも気になるので試しておきたいところ。