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

組み込みエンジニア
2021-08-26
本記事はプロモーションが含まれています。

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

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

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

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/4.4.0/chart.umd.js"></script>

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

広告

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

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

GitHub-Chartjsダウンロード

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

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

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

Chart.jsのライブラリ
Chart.jsのライブラリ

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

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

umdはファイルのサイズを小さくするためにchart.jsのコードの改行コードなどを削減したものです。旧バージョンの3.X.Xではchart.min.jsでしたが名称が変更されています。

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

ライブラリの使い方

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

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

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

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

<head>部分で<stcript src>でchart.umd.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 の使用例

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

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, //ｙ軸のタイトルを表示するか
                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関数でサイズを指定できます。
オプションの設定の説明

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

スポンサーリンク

２軸グラフを表示する

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つ目の要素も１つ目のサンプルと同様に配列内にグラフのデータを設定します。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’を指定します。

広告

凡例の表示やグリッド線を変更する

凡例の文字は初期では灰色と見にくいことがあります。凡例の位置と文字色の変更はoptionの共通部分で変更します。

options: {
    plugins: {
        legend:{
            position:"right",
            labels:{
                color:"white",
            }
       }
  },

optionsブロパティ内のpluginsブロパティを参照します。legendブロパティ内のposition:で凡例の位置を指定します。例ではright(右)を指定していますが、left(左)、top(上：デフォルト)、bottom(下)を指定することができます。

文字色の変更はlabelsプロパティ内のcolor:で行います。例ではwhite(白)を指定していますが、red(赤)、yellow(黄)などの指定ができます。

グラフの軸は直線でグラフ内部のグリッドを点線で表示する方法を説明します。

scales: {
    x: {
        grid:{
            color:"gray",
            borderDash: [2,2],
            borderWidth: 1,
            tickColor:"red",
            borderColor:"white",
        },
    },
},

optionプロパティ内のscalesブロパティを参照します。gridプロパティ内のcolor:でグリッドの色を指定します。例ではgray(灰)を指定しています。

borderDash:は点線を描写する指定です。[長さ,間隔]のように指定します。例では[2,2]にしていますが、2px線を引き2px間隔をあける指定になります。

borderWidthは軸の線の太さになります。例では1にしていますが大きくすると線が太くなります。tickColor:は軸から外側に向けての線の色を指定します。borderColor:は軸の色を指定します。例では指定項目が分かりやすいようにtickColor:とborderColor:の色を異色にしていますがグラフの見やすさからすると同色にすることをお勧めします。

ソースコード全体

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

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

サンプルグラフ：

<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "UTF-8">
    <script src = "chart.umd.js"></script>
    <!--<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js"></script>-->
    <!-- chart.umd.jsを読み込む -->
</head>
<body>
    <canvas id ='ChartID' style="width: 800px; height: 400px; margin: auto;"></canvas>
    <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, //ｙ軸のタイトルを表示するか
                            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.umd.js"></script>
    <!--<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js"></script>-->
    <!-- chart.umd.jsを読み込む -->
</head>
<body>
    <canvas id ='ChartID3' style="width: 800px; height: 400px; margin: auto;"></canvas>
    <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, //ｙ軸のタイトルを表示するか
                            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>

凡例の表示やグリッド線を変更する：

<!DOCTYPE html>
<html lang = "ja">
<head>
    <meta charset = "UTF-8">
    <script src = "chart.umd.js"></script>
    <!--<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js"></script>-->
    <!-- chart.umd.jsを読み込む -->
</head>
<body>
    <canvas id ='ChartID' style="width: 800px; height: 400px; margin: auto; background-color: black;" ></canvas>
    <script>
        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: 'sample3',
                    data: [20,17,16,14,18,20,17],
                    borderColor: 'yellow', //線の色
                    backgroundColor:"yellow",
                    borderWidth: 1, //線の幅
                    pointRadius: 1, //プロットした点の大きさ
                }]
            },
            options: {
                responsive: true,

                plugins: { //表示タイトルをつける場合
                    title: {
                        display: true,
                        color:"white",
                        text: 'サンプルグラフ3',
                        font: {
                            size: 20,
                        },
                    },//表示タイトルをつける場合--end--
                    legend:{
                        position:"right",
                        labels:{
                            color:"white",
                        }
                    }
                }, 

                scales: {
                    x: {
                        ticks: {
                            display: true,
                            color:"white",
                        },
                        grid:{
                            color:"gray",
                            borderDash: [1,5],
                            borderWidth: 1,
                            tickColor:"red",
                            borderColor:"white",
                        },
                        title: { //X軸のタイトルを入れる場合
                            display: true,
                            text: 'サンプルプロット数',
                            color: 'white',
                            font: {
                                size: 16
                            }
                        }, //X軸のタイトルを入れる場合--end--
                    },
                    y: {
                        min: 0,
                        max:30,
                        ticks: {
                            display: true,
                            color:"white",
                        },
                        grid:{
                            color:"gray",
                            borderDash: [2,2],
                            borderWidth: 1,
                            tickColor:"white",
                            borderColor:"white",
                        },
                        title: { //Y軸のタイトルを入れる場合
                            display: true, //ｙ軸のタイトルを表示するか
                            text: 'サンプルデータ値',
                            color: 'yellow',
                            font: {
                                size: 16
                            }
                        }, //Y軸のタイトルを入れる場合--end--
                    }
                }
           }
        });
    </script>
</body>
</html>

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

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

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

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

PR： 未経験OK、20代の理系に特化した就職、転職サービス UZUZ（ウズウズ）

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

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