JavaScriptで散布図を表示するプログラムを解説～scatter chart～【Chart.js】

2020年4月27日プログラムChart.js,JavaScript,プログラムサンプル

【サンプルコード】JavaScriptでグラフ表示するライブラリChart.js～散布図(scatter chart)～
【サンプルコード】JavaScriptでグラフ表示するライブラリChart.js～散布図(scatter chart)～

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

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

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

JavaScriptでグラフ表示するライブラリChart.js～散布図(scatter chart)～のサンプルコード

【サンプルコード】JavaScriptでグラフ表示するライブラリChart.js～散布図(scatter chart)～
【サンプルコード】JavaScriptでグラフ表示するライブラリChart.js～散布図(scatter chart)～

JavaScriptのChart.jsは、HTML5のcanvasタグへグラフを描画します。ここでは散布図(scatter 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: 'scatter',
            data: {
                labels: [
                    'ラベル１',
                    'ラベル２',
                    'ラベル３',
                    'ラベル４',
                    'ラベル５'
                ],
                datasets: [{
                    label: 'データA',
                    data: [
                        {x:20,y:10},{x:10,y:13},{x:20,y:5},{x:40,y:10},{x:10,y:20}
                    ],
                    backgroundColor: 'rgba(241, 107, 141, 1)',
                },{
                    label: 'データB',
                    data: [
                        {x:30,y:5},{x:10,y:40},{x:40,y:10},{x:4,y:20},{x:15,y:35}
                    ],
                    backgroundColor: 'rgba( 31, 167, 165, 1)',
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'サンプルグラフ',
                },
                scales: {
                    xAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Xラベル',
                        },
                        ticks: {
                            suggestedMax: 40,
                            suggestedMin: 0,
                            stepSize: 10,
                            callback: function(value, index, values){
                                return  value +  '単位'
                            }
                        },
                    }],
                    yAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Yラベル',
                        },
                        ticks: {
                            suggestedMax: 40,
                            suggestedMin: 0,
                            stepSize: 10,
                            callback: function(value, index, values){
                                return  value +  '単位'
                            }
                        },
                    }]
                }
            }
        });
    </script>
</body>
</html>

JavaScriptでグラフ表示するライブラリChart.js～散布図(scatter chart)～のサンプルコードを解説

JavaScriptのChart.jsで散布図(scatter chart)を描画するサンプルコードの解説をします。

HTML部分

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

canvasタグを設置

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

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

Jqueryを読み込む

JQueryをCDN(Content Delivery Network)で読み込みます。

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

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

Chart.jsを読み込む

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

<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: 'scatter',
    data: {
        labels: [
            'ラベル１',
            'ラベル２',
            'ラベル３',
            'ラベル４',
            'ラベル５'
        ],
        datasets: [{
            label: 'データA',
            data: [
                {x:20,y:10},{x:10,y:13},{x:20,y:5},{x:40,y:10},{x:10,y:20}
            ],
            backgroundColor: 'rgba(241, 107, 141, 1)',
        },{
            label: 'データB',
            data: [
                {x:30,y:5},{x:10,y:40},{x:40,y:10},{x:4,y:20},{x:15,y:35}
            ],
            backgroundColor: 'rgba( 31, 167, 165, 1)',
        }]
    },
    options: {
        title: {
            display: true,
            text: 'サンプルグラフ',
        },
        scales: {
            xAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Xラベル',
                },
                ticks: {
                    suggestedMax: 40,
                    suggestedMin: 0,
                    stepSize: 10,
                    callback: function(value, index, values){
                        return  value +  '単位'
                    }
                },
            }],
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Yラベル',
                },
                ticks: {
                    suggestedMax: 40,
                    suggestedMin: 0,
                    stepSize: 10,
                    callback: function(value, index, values){
                        return  value +  '単位'
                    }
                },
            }]
        }
    }
});
Chart.jsのグラフ設定値を解説
  • type：描画するグラフの種類(pie:円グラフ、line:折れ線グラフ、bar:棒グラフ、など)
    • data：グラフのラベルやデータ
      • labels：データの凡例
      • datasets：データセット
        • label：データのラベルテキスト
        • data：データの値
          • xとyで指定
        • backgroundColor：グラフの色
  • options：オプション設定
    • title：グラフのタイトル
      • display：trueで表示
      • text：タイトルのテキスト
    • scales：グラフ軸の設定
      • xAxes：X軸の設定
        • scaleLabel：
          • display：trueで表示
          • labelString：
        • ticks：目盛り線
          • suggestedMin：軸の最小値
          • suggestedMax：軸の最大値
          • stepSize：軸の刻み幅
      • yAxes：Y軸の設定
        • scaleLabel：
          • display：
          • labelString：
        • ticks：目盛り線
          • suggestedMin：軸の最小値
          • suggestedMax：軸の最大値
          • stepSize：軸の刻み幅

詳しくは「散布図 · Chart.js 日本語ドキュメント」を参照してください。

おわり

今回はJavaScriptで散布図(scatter chart)をChart.jsで描画するサンプルコードを紹介しました。

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

＼プログラミングスクール受講メリット／

・メンターにすぐ聞けるので分からないところでつまづかない
・受講生同士で学び合いモチベーション維持しやすい
・就学後に就職支援や進路サポートを受けることが出来る

＼現役エンジニアによるサポート就職支援／
[ TechAcademy ]
の特徴・料金を確認
ユート
ユート

1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト

2020年4月27日プログラムChart.js,JavaScript,プログラムサンプル

Posted by ユート