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

システムChart.js,JavaScript

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

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

JavaScriptグラフを表示するライブラリChart.jsで、円グラフ(pie chart)を表示するサンプルコードを解説します。

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

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

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

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

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

<html>
<head>
    <meta charset="utf-8">
    <title>Chart Sample</title>
</head>
<body>
    <h1>Chartサンプル</h1>
    <div style="width: 300px;">
        <canvas id="chart" width="150" height="150"></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: 'pie',
            data: {
                labels: [
                    'ラベル1',
                    'ラベル2',
                    'ラベル3',
                    'ラベル4',
                    'ラベル5'
                ],
                datasets: [{
                    label: 'サンプルグラフ',
                    data: [
                        10,
                        40,
                        20,
                        10,
                        20
                    ],
                    backgroundColor: [
                        'rgba(241, 107, 141, 1)',
                        'rgba( 31, 167, 165, 1)',
                        'rgba(249, 199,  83, 1)',
                        'rgba(176, 110,  30, 1)',
                        'rgba(124,  91, 164, 1)'
                    ]
                }]
            },
            options: {
                legend: {
                    position: 'bottom',
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            display: false,
                            beginAtZero: true,
                        },
                        gridLines: {
                            display: false
                        }
                    }]
                }
            }
        });
    </script>
</body>
</html>

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

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

HTML部分

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

canvasタグを設置

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

<canvas id="chart" width="150" height="150"></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: 'pie',
    data: {
        labels: [
            'ラベル1',
            'ラベル2',
            'ラベル3',
            'ラベル4',
            'ラベル5'
        ],
        datasets: [{
            label: 'サンプルグラフ',
            data: [
                10,
                40,
                20,
                10,
                20
            ],
            backgroundColor: [
                'rgba(241, 107, 141, 1)',
                'rgba( 31, 167, 165, 1)',
                'rgba(249, 199,  83, 1)',
                'rgba(176, 110,  30, 1)',
                'rgba(124,  91, 164, 1)'
            ]
        }]
    },
    options: {
        legend: {
            position: 'bottom',
        },
        scales: {
            yAxes: [{
                ticks: {
                    display: false,
                    beginAtZero: true,
                },
                gridLines: {
                    display: false
                }
            }]
        }
    }
});
Chart.jsのグラフ設定値を解説

  • type:描画するグラフの種類(pie:円グラフ、line:折れ線グラフ、bar:棒グラフ、など)
  • data:グラフのラベルやデータ
    • labels:ラベル
    • datasets:データセット
      • data:データの値
      • backgroundColor:円グラフの色
  • options:オプション設定
    • legend
    • scales
      • yAxes
        • ticks
        • gridLines

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

おわり

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

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

プログラミング解説講座

UT
UTの日常

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

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

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