Chart.jsを使ってデータをブラウザー上でグラフ表示する

組み込みエンジニア

こんにちは、ENGかぴです。

Chart.jsを使用するとブラウザー上にグラフを表示することができます。グラフ表示するメソッドがjavaScriptでライブラリ化されているためHTMLでscriptでライブラリを読み込みメソッドに沿ってグラフデータを設定し使用します。

本記事ではChart.jsのダウンロードしグラフの作成方法の一例を紹介しています。Chart.jsのバージョンは本記事作成時の2021年8月の最新である3.5.1を対象とします。

Chart.jsでグラフ表示する

上のグラフはChart.jsを使用して表示しています。ページを読み込んだ際にランダム値がセットされグラフ値として表示しています。ダウンロードの方法からサンプルチャートを表示するまでを説明します。

チャートは数値・データを分かりやすく表現したものであり、グラフはチャートにおいてX軸とY軸をもつものと区別する場合もありますが、同じものと考えて良いとでしょう。

本記事ではLINEグラフを表示することを目的としているため以下ではグラフと表現します。

Chart.jsライブラリをURL指定で使用する

Chart.jsはライブラリをダウンロードしなくてもURLがcdnjsにライブラリにリンクするURLが公開されているため対象のバージョンのライブラリが保管されているURLを指定すると使用できます。

cdnjs-Chart.jsのライブラリの保管先URLリンク

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

cdnjsで対象のバージョンをリンクをコピーしてHTMLでライブラリのURLを指定すると使用できるようになります。

Chart.jsのライブラリをダウンロードして使用する

URLで指定する方法はブラウザーがネット接続されている場合のみ使用できますがローカルで使用する場合はライブラリをダウンロードして使用します。

GitHub-Chartjsバージョン3.5.1ダウンロード

GitHub-chart.jsのダウンロード
GitHub-chart.jsのダウンロード

GitHubで公開されているchart.jsのバージョン3.5.1をダウンロードしてします。ライブラリは「chart.js-3.5.1.tgz」にパッケージとして提供されています。ダウンロードして任意の場所に解凍します。

tgz形式で圧縮されているため解凍用のソフトが必要になる場合があります。tgzファイルが解凍できない場合はLhaplusなどのフリーソフトを使用すると解凍できます。窓の杜やVectorでフリーで公開されています。

パッケージ一覧
Chart.jsのライブラリ

tgzファイルを解凍するとpackageファイルが生成されます。例ではWorkSpaceフォルダ内にChartjs3.5.1ファルダを作り内部に解凍したpackageファイルを収納しています。Chart.jsのライブラリファイルはdistフォルダ内にあります。

HTMLでscriptとして指定するのは「chart.js」または「chart.min.js」になりますがどちらも同じ動作になります。

minの方はファイルのサイズを小さくするためにchart.jsのコードの改行コードなどを削減したものです。

ライブラリの容量を削減できるメリットがありますがコードの可読性が低くなってしまいます。ライブラリを編集しないのであればどちらを使用しても問題ありません。本記事ではchart.min.jsを使用します。

ライブラリの使い方

HTMLにChart.jsを組み込む方法を説明します。任意のフォルダ内にHTMLファイルを作成してグラフ表示用のキャンパスを準備するまでを説明します。

HTMLファイルの作成とライブラリを配置
HTMLファイルの作成とライブラリを配置

chart-sampleフォルダを任意の場所に作成しHTMLファイルを準備します。テキストファイルなどを準備して拡張子をhtml指定するとHTMLファイルファイルになります。同じフォルダ内にchart.min.jsファイルを配置します。URLを指定する場合はchart.min.jsを配置する必要はありません。

同じフォルダ内に配置しているのはHTMLでchart.min.jsを指定しやすいのとファイルを移動した際にリンクが取れなくなることを防ぐためです。

<!DOCTYPE html>
<html lang = "ja">
<head>
    <meta charset = "UTF-8">
    <script src = "chart.min.js"></script>
    <!-- chart.min.jsを読み込む -->
</head>
<body>
    <div style="height: 400px; width: 500px; margin: auto;">
        <canvas id ='ChartID'></canvas>
    </div>
    <script>
        //グラフのデータを入れる
    </script>
</body>
</html>

<head>部分で<stcript src>でchart.min.jsを指定して読み込んでいます。同じフォルダ内に配置しているためそのままファイル名で読み込みができます。

<body>内でグラフを表示するキャンバスを準備します。canvas idをChartIDとしています。グラフのデータを生成する際にID名を指定してグラフデータを生成します。<script>内でグラフデータを設定するとグラフが表示されます。

Chart.jsでLINEグラフデータを表示する

HTML内に実装したキャンバス内にLINEグラフを表示するためグラフデータのインスタンスを生成し各種メソッドの設定を行います。

このグラフは以下のソースコードによって表示しています。グラフ表示するための最低限の設定を記述しています。

var ctx = document.getElementById('ChartID').getContext('2d');
var myChart = new Chart( ctx, {
    type: 'line', //グラフの種類
    data: { //グラフデータ
        labels: [1,2,3,4,5,6,7],
        datasets: [{
            type:'line',
            label: 'sample1',
            data: [10,20,30,40,30,20,10],        
        }]
    },
    options: { //オプション
        responsive: true,
        scales: { //軸の設定
            x: {
                ticks: {
                    display: true //メモリを表示するか
                }
            },
            y: { //y軸
                ticks: {
                    display: true
                }
            }
        }
    }
});

document.getElementById(‘ChartID’)で表示するキャンバスを指定しctxにセットします。mychartをグラフデータのインスタンスを生成します。Chart()の第1引数にキャンバスとリンクしたctxを指定します。第2引数にグラフの表示やデータの構造体を指定します。

グラフデータの構造体はグラフの種類とグラフデータおよびオプションの設定します。グラフの種類は’LINE’や’BAR’等グラフの形態を設定します。

グラフデータではlabels:でX軸の値をセット、data:でY軸の値をセットします。label:はx軸に対してY軸にデータをプロットしたときの凡例の名称となります。

オプションの設定はグラフをレスポンシブ表示する設定やX軸及びY軸のメモリの設定などを行います。軸にタイトルを追加する場合やメモリ表示の範囲を指定する設定ができます。

グラフデータとオプションの設定

グラフデータの設定とオプションの設定を行います。グラフの各種設定項目は以下のリンクに詳細があります。

Chart.js 3.5.1

各種様々な設定ができますがタイトルの表示、グラフの色など表示、軸の設定を中心に説明します。

datasets: [{
    type:'line',
    label: 'sample1',
    data: ramdomval,
    //以下は線の種類に関する設定
    borderColor: 'red', //線の色
    backgroundColor:red, //下を塗りつぶした時の色
    fill: false, //プロット点から下を塗りつぶす
    borderWidth: 1, //線の幅
    pointRadius: 2, //プロットした点の大きさ
    pointHoverBorderWidth: 10, //プロットした点を選択した時に大きく表示するサイズ
    pointStyle: 'triangle', //プロットした点の表示(△)
    tension: 0, //線の伸縮
    yAxisID: 'y', //軸のスケールを選択
}]

線の種類を指定しない場合はサンプルのように灰色の線となります。線の種類の設定について説明します。私が良く使用するものを中心に説明します。

メソッド説明
borderColor線の色を指定します。色の指定はデフォルトで定義されているredやblueなどで指定できますが、rgba()方式による色の指定もできます。
例)’rgba(201,60,58,0.8)’
例)’red’ ‘blue’ ‘green’ ‘yellow’ ‘ skyblue’ ‘lightgreen’等
存在しない色の場合は黒色になります。
backgroundColorfillをtrueにしたときにプロットした点より下を塗りつぶす色を指定します。
色の指定はborderColorの例と同じです。
fillプロットした点より下を塗りつぶす場合はtrueを指定する。
塗りつぶさない場合はfalseを指定する。
borderWidth線の幅を指定します。値を大きくするほど太い線になります。
pointRadiusプロットした点の大きさを指定します。
値を大きくするほど大きな点になります。
pointHoverBorderWidthプロットした点にカーソルを合わせた時に表示するサイズを指定します。
大きくするほどプロット点を強調することができるが線が太くなりすぎるとpointStyleで指定したプロット表示がつぶれて見えます。
pointStyleプロットした点の表示記号を指定します。デフォルトは●になります。
例)’triangle’ ‘ rectRounded ‘ ‘rect’ ‘rectRot’ ‘crossRot’ ‘cross’
‘star’ ‘line’ ‘dash’
tensionプロットした線間の結びの緊張状態を指定します。0であれば直線となります。
大きな値を指定するほど緩やかな線間の表示になりますが見た目が悪くなることがあるため調整が必要です。プロット数が多い場合は使用しない方が良いでしょう。
yAxisIDy軸のスケールを指定する。optionsで指定したy軸を指定する。
線に関するメソッドの説明

オプションの設定について説明します。オプションの設定は軸の設定やタイトルの設定などを行います。

options: {
    responsive: true,
    plugins: { //表示タイトルをつける場合
        title: {
            display: true,
            text: 'サンプルグラフ',
            font: {
                size: 20
            }
        },
    }, //表示タイトルをつける場合--end--
    scales: {
        x: { //x軸の属性名
            display: true,
            ticks: {
                display: true
            },
            title: { //X軸のタイトルを入れる場合
                display: true,
                text: 'サンプルプロット数',
                color: 'black',
                font: {
                    size: 16
                }
            }, //X軸のタイトルを入れる場合--end--
        },
        y: { //y軸の属性名
            display: true, //y軸を表示するか
            min: 0,
            max: 100,
            ticks: {
                display: true, //目盛りを表示するか
                color: 'red',
            },
            title: { //Y軸のタイトルを入れる場合
                display: true, //y軸のタイトルを表示するか
                text: 'サンプルデータ値',
                color: 'red',
                font: {
                    size: 16
                }
            }, //Y軸のタイトルを入れる場合--end--
        }
    }
}

オプションの設定を行わない場合はタイトルなどは表示されません。またグラフ表示の値は自動で調整されます。

メソッド説明
  responsive  レスポンシブ表示する場合はtrueを指定します。初期設定はfalseです。
pluginsグラフのタイトルをつける際に使用します。
plugins内でタイトルを表示するためにdesplayをtrueにします。
tilteメソッドを使用しtextにグラフ名を入力します。
フォントサイズを変更する場合はfontメソッド内でsizeを指定します。
scalesx軸とy軸の設定を行います。
desplay各項目の表示の指定を行います。trueを指定すると表示します。
x軸やy軸の先頭でdesplay設定をfalseにすると全体で表示しない設定になります。
min
max
軸の最小値と最大値を指定します。
指定しない場合は値に応じて自動で軸の範囲が指定されます。
ticks軸の目盛りの表示や軸の色の設定を行います。
ticks内でcolorで’red’など色を指定すると軸の項目の色が変更できます。
titletitle内でdisplayをtrueにすると軸のタイトルが表示できます。
textで軸のタイトルを指定します。
colorで表示色を指定できfontメソッドでサイズを指定できます。
オプションの設定の説明

その他にはアニメーションを停止して動作を軽くしたりするメソッドなどがありますが使用する頻度は少ないため割愛しています。

2軸グラフを表示する

Chart.jsは1軸だけでなく2軸のグラフなど複数軸の表示ができます。2軸のグラフ表示はdetasetsメソッドにおいて2つのデータの配列を生成することで実現できます。

datasets: [{
    //sample1とコードと同じなので省略          
},
{ //sample2のデータをセット
    type:'line',
    label: 'sample2',
    data: ramdomval2,
    borderColor: 'blue', //線の色
    backgroundColor: 'blue', //下を塗りつぶした時の色
    fill: false, //プロット点から下を塗りつぶす
    borderWidth: 1, //線の幅
    pointRadius: 1, //プロットした点の大きさ
    pointHoverBorderWidth: 1, //プロットした点を選択した時に大きく表示するサイズ
    pointStyle: 'rect', //プロットした点の表示(△)
    tension: 0, //線の伸縮
    yAxisID: 'y2', //軸のスケールを選択
}]

2つ目の要素も1つ目のサンプルと同様に配列内にグラフのデータを設定します。y軸のスケールの設定メソッドであるyAxisIDを’y2’にすることで別のスケールでのグラフ表示ができます。y2スケールはオプションの設定で追加します。

y2: {
    display: true, //y2軸を表示するか
    min: 0,
    max: 200,
    position: 'right', //軸を右側に表示
    ticks:{
        display: true,  //目盛りを表示するか
        color: 'blue',
    },
    title: { //y2軸のタイトルを入れる場合
        display: true, //y2軸のタイトルを表示するか
        text: 'サンプルデータ2値',
        color: 'blue',
        font: {
            size: 16
        }
    } //y2軸のタイトルを入れる場合--end--
}

y2軸のスケールをy軸のスケールの下に追加します。設定する内容はy軸とほとんど同じですが見た目で区別できるように軸の色を青色にしています。y2軸をグラフの右側に表示するためpositionメソッドで’right’を指定します。

ソースコード全体

以下のソースコードはコンパイルして動作確認をしております。チェックはしておりますがコメントなど細かな部分で間違っている可能性があります。参考としてお使いいただければと思います。

サンプルのソースコードをテキストファイルの拡張子をhtmlにしてGoogle Chromeなどのブラウザで表示してみてください。

サンプルグラフ:

<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "UTF-8">
    <script src = "chart.min.js"></script>
    <!--<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>-->
    <!-- chart.min.jsを読み込む -->
</head>
<body>
    <div style="height: 500px; width: 600px; margin: auto;">
        <canvas id ='ChartID'></canvas>
    </div>
    <script>
        var ramdomval;
        var sz =7;

        ramdomval = [sz];
        for( i=0; i < sz; i++){
            ramdomval[i] = Math.random() * 100;
        }

        var ctx = document.getElementById('ChartID').getContext('2d');
        var myChart = new Chart( ctx, {
            type: 'line',
            data: {
                labels: [1,2,3,4,5,6,7],
                datasets: [{
                    type:'line',
                    label: 'sample1',
                    data: ramdomval,//[10,20,30,40,30,20,10],
                    //以下は線の種類に関する設定
                    borderColor: 'red', //線の色
                    backgroundColor: 'red', //下を塗りつぶした時の色
                    fill: false, //プロット点から下を塗りつぶす
                    borderWidth: 1, //線の幅
                    pointRadius: 1, //プロットした点の大きさ
                    pointHoverBorderWidth: 1, //選択した時に大きく表示するサイズ
                    pointStyle: 'triangle', //プロットした点の表示(△)
                    tension: 0, //線の伸縮
                    yAxisID: 'y', //軸のスケールを選択
                }]
            },
            options: {
                responsive: true,
                plugins: { //表示タイトルをつける場合
                    title: {
                        display: true,
                        text: 'サンプルグラフ',
                        font: {
                            size: 20
                        }
                    },
                }, //表示タイトルをつける場合--end--
                scales: {
                    x: {
                        display: true,
                        ticks: {
                            display: true
                        },
                        title: { //X軸のタイトルを入れる場合
                            display: true,
                            text: 'サンプルプロット数',
                            color: 'black',
                            font: {
                                size: 16
                            }
                        }, //X軸のタイトルを入れる場合--end--
                    },
                    y: {
                        display: true, //y軸を表示するか
                        min: 0,
                        max: 100,
                        ticks: {
                            display: true, //目盛りを表示するか
                            color: 'red',
                        },
                        title: { //Y軸のタイトルを入れる場合
                            display: true, //y軸のタイトルを表示するか
                            text: 'サンプルデータ値',
                            color: 'red',
                            font: {
                                size: 16
                            }
                        }, //Y軸のタイトルを入れる場合--end--
                    },
                }
           }
        });
    </script>
</body>
</html>

2軸のサンプルグラフ:

<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "UTF-8">
    <script src = "chart.min.js"></script>
    <!--<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>-->
    <!-- chart.min.jsを読み込む -->
</head>
<body>
    <div style="height: 500px; width: 600px; margin: auto;">
        <canvas id ='ChartID3'></canvas>
    </div>
    <script>
        var ramdomval;
        var ramdomval2;
        var sz =7;

        ramdomval = [sz];
        ramdomval2 = [sz];
        for( i=0; i < sz; i++){
            ramdomval[i] = Math.random() * 100;
            ramdomval2[i] = Math.random() * 100;
        }

        var ctx = document.getElementById('ChartID3').getContext('2d');
        var myChart = new Chart( ctx, {
            type: 'line',
            data: {
                labels: [1,2,3,4,5,6,7],
                datasets: [{
                    type:'line',
                    label: 'sample1',
                    data: ramdomval,
                    borderColor: 'red', //線の色
                    backgroundColor: 'red', //下を塗りつぶした時の色
                    fill: false, //プロット点から下を塗りつぶす
                    borderWidth: 1, //線の幅
                    pointRadius: 1, //プロットした点の大きさ
                    pointHoverBorderWidth: 1, //選択した時に大きく表示するサイズ
                    pointStyle: 'triangle', //プロットした点の表示(△)
                    tension: 0, //線の伸縮
                    yAxisID: 'y', //軸のスケールを選択
                },
                {
                    type:'line',
                    label: 'sample2',
                    data: ramdomval2,
                    borderColor: 'blue', //線の色
                    backgroundColor: 'blue', //下を塗りつぶした時の色
                    fill: false, //プロット点から下を塗りつぶす
                    borderWidth: 1, //線の幅
                    pointRadius: 1, //プロットした点の大きさ
                    pointHoverBorderWidth: 1, //選択した時に大きく表示するサイズ
                    pointStyle: 'rect', //プロットした点の表示(□)
                    tension: 0, //線の伸縮
                    yAxisID: 'y2', //軸のスケールを選択
                }]
            },
            options: {
                responsive: true,
                plugins: { //表示タイトルをつける場合
                    title: {
                        display: true,
                        text: 'サンプルグラフ2軸',
                        font: {
                            size: 20
                        }
                    },
                }, //表示タイトルをつける場合--end--
                scales: {
                    x: {
                        display: true,
                        ticks: {
                            display: true
                        },
                        title: {  //X軸のタイトルを入れる場合
                            display: true,
                            text: 'サンプルプロット数',
                            color: 'black',
                            font: {
                                size: 16
                            }
                        }, //X軸のタイトルを入れる場合--end--
                    },
                    y: {
                        display: true, //y軸を表示するか
                        min: 0,
                        max: 100,
                        ticks: {
                            display: true, //目盛りを表示するか
                            color: 'red',
                        },
                        title: { //Y軸のタイトルを入れる場合
                            display: true, //y軸のタイトルを表示するか
                            text: 'サンプルデータ値',
                            color: 'red',
                            font: {
                                size: 16
                            }
                        }, //Y軸のタイトルを入れる場合--end--
                    },
                    y2: {
                        display: true, //y2軸を表示するか
                        min: 0,
                        max: 200,
                        position: 'right', //軸を右側に表示
                        ticks:{
                            display: true,  //目盛りを表示するか
                            color: 'blue',
                        },
                        title: { //y2軸のタイトルを入れる場合
                            display: true, //y2軸のタイトルを表示するか
                            text: 'サンプルデータ2値',
                            color: 'blue',
                            font: {
                                size: 16
                            }
                        }, //y2軸のタイトルを入れる場合--end--
                    }
                }
           }
        });
    </script>
</body>
</html>

まとめ:Chart.jsは簡単に使えて便利なライブラリ

chart.jsを使うとエクセルでグラフを作成するようにブラウザー上に簡単にグラフを表示することができます。オープンソースであり誰でも簡単に使用できるのが魅力的です。

ライブラリの使い方はダウンロードする方法とURLを指定する方法の2通りがあります。ライブラリを組み込みメソッドに値を指定することでグラフが表示ができ2軸のグラフ表示も可能です。

線グラフのみでなく棒グラフや円グラフにも対応しており様々データを用途に応じてきれいに表示することができます。

あなたの市場価値を見いだす転職サイト【ミイダス】無料会員登録

最後まで、読んでいただきありがとうございました。

タイトルとURLをコピーしました