超簡単chart.jsでグラフ表示 散布図編

スポンサーリンク

今回は、横軸(X軸)が一定間隔でないデータのグラフ化。
複数の項目（曲線）のデータの横軸が項目毎に違う場合のグラフ化。
そんな場合に適した散布図をchart.jpで表示します。
前回同様、適当な例題を用意して表示します。
また、前回と同じ部分の説明は割愛させて頂きますので前回の記事もご参照ください。

超簡単chart.jsでグラフ表示 ランキング遷移グラフ編
HPやブログなどでグラフ表示が必要な場合は、迷わずchart.jsを使用することをお勧めします。 どんなに簡単にグラフ表示が出来るか例題を作って説明します。 例題の内容 今回は、chart.jsを使用したベスト10＋圏外の「日々のランキング...
info-biz.club
2019.10.28

散布図の例題の内容

例題として、日付が定間隔でない場合の米ドル対円相場のデータを用意しました。
横軸（X軸）日付の範囲は、2019/09/27～2019/10/28で不定期です。
縦軸（Y軸）106.74円～108.80円です。

日付(X) 米ドル対円相場(Y)
2019/09/27 107.84
2019/09/30 107.92
2019/10/01 108.19
2019/10/02 107.71
2019/10/03 107.09
2019/10/04 106.86
2019/10/07 106.74
2019/10/08 107.39
2019/10/09 107.12
2019/10/10 107.37
2019/10/11 108.13
2019/10/15 108.42
2019/10/16 108.74
2019/10/18 108.71
2019/10/21 108.52
2019/10/23 108.41
2019/10/24 108.68
2019/10/25 108.74
2019/10/28 108.80

グラフ表示に必要な構成

chart.jsを読み込む部分、グラフの描画エリアは前回同様です。
そのソースは、

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

<canvas id="Chart1" style="max-width: 600px;margin: auto;"></canvas>

グラフ本体プログラム

グラフ本体のプログラムでJavascriptで記述します。
散布図でも前回と同じで、大まかに分けると次の4つで構成します
以下詳細です。

Chartクラスの定義とインスタンス化部分

描画エリアへ渡すChartを作ります。
ソースコードは、

var ctx = document.getElementById("Chart1");

となります。

グラフのタイプ指定

グラフの形を指定します。
今回は散布図なので'scatter'です。
ソースコードは、

type: 'scatter'

となります。

データセット

グラフのデータを指定します。
指定方法にNumberタイプとPointタイプが有りますが
散布図は、Pointタイプになります。
labelに曲線の名称を指定します。
dataには、
日付け（X軸）と値（Y軸）をペアとして
必要なポイント分指定します。
日付は、Date()クラスで指定。
'年４桁/月2桁/日2桁'(例2019/10/01)で指定しました。

ソースコードは、

data{
  datasets:[
    {
      label: '米ドル対円相場',
      data: [
        { x: new Date(), y: 値1 },
        { x: new Date(), y: 値2 }
      ]
    }
  ]
}

このような感じです。

オプションズ

これも大まかなパラメータ群の１つで「options」です。

ソースコードは、

options:{
  scales:{
    xAxes: [{
      gridLines: {                     // 補助線（縦線）
        color: "rgba(255, 0, 0, 0.2)", // 補助線の色
        zeroLineColor: "black"         // x=0時（縦線の色）
      },
      type: 'time',
      time: {
        unit: 'day',
        displayFormats: {
          day: 'YYYY/MM/DD'
        },
        stepSize: 1,
      },
    }],
    yAxes: [{
      gridLines: {                     // 補助線（横線）
        color: "rgba(0, 0, 255, 0.2)", // 補助線の色
        zeroLineColor: "black"         // y=0時（横線の色）
      },
      ticks: {
        reverse: false,
        Max: 120,
        Min: 100,
        stepSize: .1,
        callback: function(value, index, values){
          label = value.toFixed(1) + '円'
          return  label
        }
      }
    }]
  }
}

横軸（X軸）は、日付なので
type: time
になります。
そしてtimeのプロパティで
単位を日に
unit: 'day'
目盛りに表示する日付フォーマットは、2019/mm/ddの形を表示したいので
 'YYYY/MM/DD'を指定します。
毎日の日付を振るので、
stepSizeは、1を設定します。

縦軸（Y軸）目盛りの設定 はCallBack関数を用いて
value.toFiexd(1)で少数点以下１桁固定に揃えて見やすくして「円」を付けて表示させます。

例題に沿った実際のソースコード

これまでの説明を盛り込んだグラフ表示に必要な実際のソースコードは、

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

<canvas id="Chart1" width="auto" height="auto"></canvas>
<script>
  var context = document.getElementById('Chart1');
  var Chart1 = new Chart(context, {
    type: 'scatter',
    data: {
      datasets: [{
        label: '米ドル対円相場',
        showLine: true,
        lineTension: 0,
        fill: false,
        borderColor: "rgba(255, 127, 0, 0.5)",
        borderWidth: 2,
        data: [
          {x: '2019/09/27' , y: 107.84},
          {x: '2019/09/30' , y: 107.92},
          {x: '2019/10/01' , y: 108.19},
          {x: '2019/10/02' , y: 107.71},
          {x: '2019/10/03' , y: 107.09},
          {x: '2019/10/04' , y: 106.86},
          {x: '2019/10/07' , y: 106.74},
          {x: '2019/10/08' , y: 107.39},
          {x: '2019/10/09' , y: 107.12},
          {x: '2019/10/10' , y: 107.37},
          {x: '2019/10/11' , y: 108.13},
          {x: '2019/10/15' , y: 108.42},
          {x: '2019/10/16' , y: 108.74},
          {x: '2019/10/18' , y: 108.71},
          {x: '2019/10/21' , y: 108.52},
          {x: '2019/10/23' , y: 108.41},
          {x: '2019/10/24' , y: 108.68},
          {x: '2019/10/25' , y: 108.74},
          {x: '2019/10/28' , y: 108.80}
        ]
      }]
    },
    options:{
      scales:{
        xAxes: [{
          gridLines: {                       // 補助線（縦線）
            color: "rgba(255, 0, 0, 0.2)",   // 補助線の色
            zeroLineColor: "black"           // x=0時の（縦線の色）
          },
          type: 'time',
          time: {
            unit: 'day',
            displayFormats: {
              day: 'YYYY/MM/DD'
            },
            stepSize: 1,
          },
        }],
        yAxes: [{
          gridLines: {                     // 補助線（横線）
            color: "rgba(0, 0, 255, 0.2)", // 補助線の色
            zeroLineColor: "black"         // y=0時の（横線の色）
          },
          ticks: {
            reverse: false,
            Max: 120,
            Min: 100,
            stepSize: .1,
            callback: function(value, index, values){
              label = value.toFixed(1) + '円'
              return  label
            }
          }
        }]
      }
    }
  });  
</script>

になります。

グラフを描画

実際にこの場所にソースコードを展開して、グラフを描いてみます。


chart.jsで散布図を作成のまとめ

今回は、横軸（X軸）を時間軸（日付）としましたが、問題もなくすんなりと表示が来ました。
実は、このchart.jsの時間データの指定は、Moment.jsが受け取るすべての形式をサポートしているようです。

Moment.js | Docs
momentjs.com

散布図をなので、横軸（日付）のデータが不定期ても日付に対してリニアに展開されてることが確認出来ました。
また、パラメータの設定で、データポイントに対して等間隔の設定も出来ます。
（「distribution: 'series'」をoptionsのscalesのxAxes内に定義するだけ）
結構優れもの！

今回の散布図の例題も、ソースコードを丸ごとコピペで、データ部分とラベルを入れ替えるだけで簡単に散布図を作ることが可能です。