【サンプルコード】JavaScriptでグラフ表示するライブラリChart.js~棒グラフ(bar chart)~

2020年4月22日システムChart.js,JavaScript

【サンプルコード】JavaScriptでグラフ表示するライブラリChart.js~棒グラフ(bar chart)~
【サンプルコード】JavaScriptでグラフ表示するライブラリChart.js~棒グラフ(bar chart)~

どうも、UT(@ut_1029)です。

JavaScriptグラフを表示するライブラリChart.jsの紹介です。今回は、棒グラフ(bar chart)を表示するサンプルコードを解説します。

JavaScriptChart.jsプログラミングするにあたって「Chart.jsでグラフを描画してみた」を参考にしました。

【勉強】JavaScriptでプログラミング〜Chart.jsで棒グラフ表示〜【プログラミング初心者の入門講座】#StudyWithMe

JavaScriptでグラフ表示するライブラリChart.js~棒グラフ(bar chart)~のサンプルコード

【サンプルコード】JavaScriptでグラフ表示するライブラリChart.js~棒グラフ(bar chart)~
【サンプルコード】JavaScriptでグラフ表示するライブラリChart.js~棒グラフ(bar chart)~

JavaScriptChart.jsは、HTML5canvasタググラフを描画します。ここでは棒グラフ(bar chart)を描画するサンプルコードを紹介します。

<html>
<head>
    <meta charset="utf-8">
    <title>Chart Sample</title>
</head>
<body>
    <h1>Chartサンプル</h1>
    <div style="width: 600px;">
        <canvas id="chart" width="600" height="300"></canvas>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>
    <script>
        var ctx = $('#chart');
        var mychart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [
                    'ラベル1',
                    'ラベル2',
                    'ラベル3',
                    'ラベル4',
                    'ラベル5'
                ],
                datasets: [{
                    label: 'データA',
                    data: [
                        10,40,20,10,20
                    ],
                    backgroundColor: 'rgba(176, 110,  30, 1)',
                },{
                    label: 'データB',
                    data: [
                        30,10,50,5,5
                    ],
                    backgroundColor: 'rgba( 31, 167, 165, 1)',
                },{
                    label: 'データC',
                    data: [
                        40,5,10,15,30
                    ],
                    backgroundColor: 'rgba(241, 107, 141, 1)'
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'サンプルグラフ'
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            suggestedMax: 100,
                            suggestedMin: 0,
                            stepSize: 10,
                            callback: function (value, index, values) {
                                return value + '単位';
                            }
                        },
                    }]
                }
            }
        });
    </script>
</body>
</html>

JavaScriptでグラフ表示するライブラリChart.js~棒グラフ(bar chart)~のサンプルコードを解説

JavaScriptChart.js棒グラフ(bar chart)を描画するサンプルコードの解説をします。

HTML部分

まずHTML部分を解説します。っといってもcanvasタグを用意するだけですが(汗)

canvasタグを設置

Chart.jsグラフを描画するためにcanvasタグを設置します。
→idの"chart"は任意の名前でOKです。後述するJavaScriptにてID名でElementを指定する際に利用します。

<canvas id="chart" width="600" height="300"></canvas>

Jqueryを読み込む

JQueryCDN(Content Delivery Network)で読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
CDNとは

Content Delivery Networkの略です。
簡単に言うと、リソース(CSSJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。
リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。

Chart.jsを読み込む

グラフ描画するためのライブラリChart.jsCDNで読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>

JavaScript部分

次にJavaScript部分の解説をします。

グラフ描画のElementを取得

canvasタググラフを描画するElementのIDを指定して取得します。

var ctx = $('#chart');

グラフ設定

グラフを描画するための設定やデータをセットします。

var mychart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [
            'ラベル1',
            'ラベル2',
            'ラベル3',
            'ラベル4',
            'ラベル5'
        ],
        datasets: [{
            label: 'データA',
            data: [
                10,40,20,10,20
            ],
            backgroundColor: 'rgba(176, 110,  30, 1)',
        },{
            label: 'データB',
            data: [
                30,10,50,5,5
            ],
            backgroundColor: 'rgba( 31, 167, 165, 1)',
        },{
            label: 'データC',
            data: [
                40,5,10,15,30
            ],
            backgroundColor: 'rgba(241, 107, 141, 1)'
        }]
    },
    options: {
        title: {
            display: true,
            text: 'サンプルグラフ'
        },
        scales: {
            yAxes: [{
                ticks: {
                    suggestedMax: 100,
                    suggestedMin: 0,
                    stepSize: 10,
                    callback: function (value, index, values) {
                        return value + '単位';
                    }
                },
            }]
        }
    }
});
Chart.jsのグラフ設定値を解説

  • type:描画するグラフの種類(pie:円グラフ、line:折れ線グラフ、bar:棒グラフ、など)
  • data:グラフのラベルやデータ
    • labels:データの凡例
    • datasets:データセット
      • label:データのラベルテキスト
      • data:データの値
      • backgroundColor:グラフの色
  • options:オプション設定
    • title:グラフのタイトル
      • display:trueで表示
      • text:タイトルのテキスト
    • scales:グラフ軸の設定
      • yAxes:Y軸の設定
        • ticks:目盛り線
          • suggestedMin:軸の最小値
          • suggestedMax:軸の最大値
          • stepSize:軸の刻み幅

詳しくは「棒グラフ · Chart.js 日本語ドキュメント」を参照してください。

おわり

今回はJavaScript棒グラフ(bar chart)をChart.jsで描画するサンプルコードを紹介しました。

JavaScriptChart.jsでは、グラフの設定やデータをオブジェクトで定義するだけで簡単にグラフが描画できます。色んなライブラリに共通してですが、細かな調整やカスタマイズしようとすると難しい点はありますが(汗)

プログラミング解説講座

UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

UTの日常では、システム開発における LinuxPHPJavaScriptJQueryMySQLなどの知識やプログラミング技術、サーバ構築や運用などAWSをメインに知識を紹介しています。

内容としては、Webシステムの開発中や運用中に発生したトラブルやエラーの対応や解決方法をまとめた備忘録やWebシステム開発の方法を未経験者の人を対象に説明したプログラム教科書を記事にしています。
Webシステム開発の知識やプログラム技術の備忘録

2020年4月22日システムChart.js,JavaScript