JavaScriptでレーダーチャートを表示するプログラムを解説~radar chart~【Chart.js】

2020年4月29日システムChart.js,JavaScript,プログラムコード

【サンプルコード】JavaScriptでグラフ表示するライブラリChart.js~レーダーチャート(radar chart)~
【サンプルコード】JavaScriptでグラフ表示するライブラリChart.js~レーダーチャート(radar chart)~

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

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

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

【勉強】JavaScriptでプログラミング〜Chart.jsでレーダーチャート表示〜【プログラミング初心者の入門講座】#StudyWithMe

JavaScriptでグラフ表示するライブラリChart.js~レーダーチャート(radar chart)~のサンプルコード

【サンプルコード】JavaScriptでグラフ表示するライブラリChart.js~レーダーチャート(radar chart)~
【サンプルコード】JavaScriptでグラフ表示するライブラリChart.js~レーダーチャート(radar chart)~

JavaScriptChart.jsは、HTML5canvasタググラフを描画します。ここではレーダーチャート(radar 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="400"></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: 'radar',
            data: {
                labels: [
                    'ラベル1',
                    'ラベル2',
                    'ラベル3',
                    'ラベル4',
                    'ラベル5'
                ],
                datasets: [{
                    label: 'データA',
                    data: [
                        10,40,20,10,20
                    ],
                    backgroundColor: 'rgba(241, 107, 141, 0.5)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 1,
                    pointBackgroundColor: 'rgb(46,106,177)',
                },{
                    label: 'データB',
                    data: [
                        40,10,5,15,30
                    ],
                    backgroundColor: 'rgba( 31, 167, 165, 0.5)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 1,
                    pointBackgroundColor: 'rgb(46,106,177)',
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'サンプルグラフ',
                },
                scale: {
                    ticks: {
                        suggestedMin: 0,
                        suggestedMax: 100,
                        stepSize: 10,
                        callback: function(value, index, values){
                            return  value +  '単位'
                        }
                    },
                }
            }
        });
    </script>
</body>
</html>

JavaScriptでグラフ表示するライブラリChart.js~レーダーチャート(radar chart)~のサンプルコードを解説

JavaScriptChart.jsレーダーチャート(radar chart)を描画するサンプルコードの解説をします。

HTML部分

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

canvasタグを設置

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

<canvas id="chart" width="600" height="400"></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: 'radar',
    data: {
        labels: [
            'ラベル1',
            'ラベル2',
            'ラベル3',
            'ラベル4',
            'ラベル5'
        ],
        datasets: [{
            label: 'データA',
            data: [
                10,40,20,10,20
            ],
            backgroundColor: 'rgba(241, 107, 141, 0.5)',
            borderColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 1,
            pointBackgroundColor: 'rgb(46,106,177)',
        },{
            label: 'データB',
            data: [
                40,10,5,15,30
            ],
            backgroundColor: 'rgba( 31, 167, 165, 0.5)',
            borderColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 1,
            pointBackgroundColor: 'rgb(46,106,177)',
        }]
    },
    options: {
        title: {
            display: true,
            text: 'サンプルグラフ',
        },
        scale: {
            ticks: {
                suggestedMin: 0,
                suggestedMax: 100,
                stepSize: 10,
                callback: function(value, index, values){
                    return  value +  '単位'
                }
            },
        }
    }
});
Chart.jsのグラフ設定値を解説
  • type:描画するグラフの種類(pie:円グラフ、line:折れ線グラフ、bar:棒グラフ、など)
  • data:グラフのラベルやデータ
    • labels:データの凡例
    • datasets:データセット
      • label:データのラベルテキスト
      • data:データの値
      • borderColor:線の色
      • borderWidth:線の太さ
      • backgroundColor:グラフの色
      • pointBackgroundColor:ポインターの色
  • options:オプション設定
    • title:グラフのタイトル
      • display:trueで表示
      • text:タイトルのテキスト
    • scale:グラフ軸の設定
      • ticks:目盛り線
        • suggestedMin:軸の最小値
        • suggestedMax:軸の最大値
        • stepSize:軸の刻み幅

詳しくは「レーダーチャート · Chart.js 日本語ドキュメント」を参照してください。

おわり

今回はJavaScriptレーダーチャート(radar chart)をChart.jsで描画するサンプルコードを紹介しました。

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

\今なら/Amazonギフト券チャージでポイントが貯まる

Amazonチャージでギフト券をチャージするとお得
Amazonチャージでギフト券をチャージするとポイントが貯まる

Amazonチャージでギフト券をチャージしておくとポイントが貯まるのでめっちゃお得です。

UT

Amazonを利用している人ならお得な情報です。

Amazonチャージとは

Amazonギフト券を事前にチャージしておけるサービスです。特典としてチャージする度にポイントが付与されるのでお得です!

  • 5,000円以上:0.5%
  • 20,000円以上:1%
  • 40,000円以上:1.5%
  • 90,000円以上:2%

※Amazonギフト券の有効期限は10年間と長いので、9万円チャージしたとしても1年に9,000円以上使うのであれば無理なく使い切れます。

リンク:Amazonチャージはこちらから。

クレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中

さらにAmazonプライム会員ならクレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中
クレジットカードチャージで0.5%ポイントが貯まる

さらにAmazonプライム会員ならクレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中です。

UT

以下のリンクからキャンペーンにエントリーする必要があるので注意が必要です。

リンク:Amazonチャージのキャンペーンエントリーはこちらから。

ブラックフライデー連動のスタンプラリー

ブラックフライデー連動のスタンプラリー
ブラックフライデー連動のスタンプラリー

Amazonでは、2021年12月17日までにスタンプを5つ集めると「10人に1人最大50,000~500ポイント」が当たるチャンス!なスタンプラリーが開催しています。

  • ポイントアップキャンペーンにエントリーする
  • Amazonプライム配送特典の対象商品を購入する
  • Prime Videoを観る
  • Amazon Music Primeを聴く
  • Prime Readingの本を読む
UT

スタンプの1つである「ポイントアップキャンペーン」へのエントリーは、2021年12月02日23時59分までに完了する必要があります。

リンク:Amazonプライムスタンプラリーはこちらから。

UT
UTの日常

1985年生まれ1児の父親です。ブログとか副業で収入を得る手段を模索中であります。(無理しない程度が理想wだから実績が出ないorz)
UTのプロフィール
Amazon欲しいものリスト

2020年4月29日システムChart.js,JavaScript,プログラムコード

Posted by UT