Chart.jsでは表を手軽に実装できます。今回はChart.jsのオプションを活用して誰もが知っている雨温図を作成します。Chart.jsのインストールや基本的な使い方に関しては「Chart.jsのインストールと基本的な使い方について解説」を参照してください！
今回作成する雨温図
今回は上のような二地点(東京・沖縄)気温と降水量を表示した雨温図を作成します。まず始めに、気温を表示する線グラフだけの表を作成し、次に降水量を表示する棒グラフを作成します。最後に二つのグラフを合成した複合グラフを作成します。今回使用したコードはcode-databaseのgithubリポジトリから取得できます。また、今回使用したデータは「気温と雨量の統計」で取得したものを使用しています。
気温の線グラフを作成する
まずは以下のような気温の線グラフを作成してみましょう。
線グラフを作成するコード
(index.html)
<div style="width: 50%;"> <canvas id="temperatureChart"></canvas> </div>
(mian.js)
const temperatureChart = document.getElementById('temperatureChart') new Chart(temperatureChart, { "type": "line", "data": { "labels": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], "datasets": [ { "label": "沖縄県", "data": [17.0, 17.1, 18.9, 21.4, 24.0, 26.8, 28.9, 28.7, 27.6, 25.2, 22.1, 18.7], "fill": false, "borderColor": "rgb(75, 192, 192)", "lineTension": 0.1 }, { "label": "東京都", "data": [5.2, 5.7, 8.7, 13.9, 18.2, 21.4, 25.0, 26.4, 22.8, 17.5, 12.1, 7.6], "fill": false, "borderColor": "rgb(130, 156, 167)", "lineTension": 0.1 } ] }, "options": { scales: { yAxes: [{ ticks: { suggestedMax: 40, suggestedMin: -20, } }] } } })
線グラフの基本的な使い方
線グラフに限らず、Chart.jsでは基本的に'type', 'data', 'options'の３つのオプションを指定することで表を描画することができます。
| 基本的なChartインスタンスのオプション | |
| type | 描画する表の種類 |
| data | 表示するデータ |
| options | 表に関する設定（メモリなど） |
線グラフで用いるオプション本項では線グラフを作成したのでtypeは'line'に設定してあります。dataにはlabels(横軸のメモリ)とdatasets(表示するデータの集合とそれぞれのオプション)を指定します。
| dataのオプション | |
| labels | 横軸のメモリ |
| datasets | 表示するデータの集合とそれぞれのオプション |
datasetsには表のtypeごとに固有のオプションもあります。詳しく知りたい方はChart.jsの日本語ドキュメントを参照してみましょう。今回は'label', 'data', 'fill', 'borderColor', 'lineTension'のオプションを指定しました。
| datasetsに使用したオプション | |
| label | グラフの名前(表のトップに記載される) |
| data | 表示するデータの配列 |
| fill | 線の下の領域に色をつけるか否か |
| borderColor | 線の色 |
| lineTension | 線の滑らかさ |
今回は沖縄と東京の二地点のデータを表示するため、これらの指定を沖縄と、東京についてそれぞれ作成して、それらのJSON形式のオプションを配列の要素にしてdatasetsにしていしています。
最後にoptionsの指定をします。ここでは主に表の軸のメモリの指定を行います。今回はscalesのオプションを指定してy軸の範囲の指定を行いました。
| scales/yAxes/ticksオプション | |
| suggestedMin | メモリの最低値(自動スケール機能付き) |
| suggestedMax | メモリの最高値(自動スケール機能付き) |
| min | メモリの最低値(自動スケール機能なし) |
| max | メモリの最高値(自動スケール機能なし) |
自動スケール機能について
自動スケール機能とは表示するデータの値が最低値、または最高値を上回っても自動で表のメモリを調整してくれるものです。これは動的に表を作成する場合などで活用されます。下の例は自動スケール機能をつけた状態でデータがメモリの最低値を下回った例です。
new Chart(autoFitChart, { type: 'line', data: { datasets: [{ label: 'data', data: [0, 20, 40, 50], "borderColor": "rgb(130, 156, 167)", "backgroundColor": "rgb(130, 156, 167)", }], labels: ['1月', '2月', '3月', '4月'] }, options: { scales: { yAxes: [{ ticks: { suggestedMin: 50, suggestedMax: 100 } }] } } })
このように0の値も表示してくれます。このようにして気温の線グラフを描画することができました。公式ドキュメントでも書かれていますので参考にしてみてください！
降水量の棒グラフを作成する
次に以下のような降水量の棒グラフを作りましょう。
棒グラフを作成するコード
(index.html)
<div style="width: 50%;"> <canvas id="precipitationChart"></canvas> </div>
(mian.js)
const precipitationChart = document.getElementById('precipitationChart') new Chart(precipitationChart, { "type": "bar", "data": { "labels": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], "datasets": [ { "label": "沖縄県", "data": [107.0, 119.7, 161.4, 165.7, 231.6, 247.2, 141.4, 240.5, 260.5, 152.9, 110.2, 102.8], "borderWidth": 5, "backgroundColor": "rgb(75, 192, 192)", }, { "label": "東京都", "data": [52.3, 56.1, 117.5, 124.5, 137.8, 167.7, 153.5, 168.2, 209.9, 197.8, 92.5, 51.0], "borderWidth": 5, "backgroundColor": "rgb(130, 156, 167)", } ] }, "options": { scales: { yAxes: [{ ticks: { suggestedMax: 300, suggestedMin: 0, } }] } } })
棒グラフで用いるオプション
棒グラフの作成方法は基本的に線グラフと同じなので(横軸と縦軸の値を決めると一意にグラフができる点では線グラフも棒グラフもほぼ一緒ですよね)、ここでは棒グラフで使用したオプションのみ使用します。
| datasetsに使用したオプション | |
| borderWidth | バーの境界線(border)の太さ(ピスセル指定) |
線グラフの時と同様に沖縄と東京の二地点を表示するのでこれらの指定をしたJSON形式のオプションを配列にして指定します。
気温と降水量の複合グラフを作成する
最後に冒頭でも紹介した以下のような複合グラフを作成しましょう。ここまで読んでいれば楽勝です。
複合グラフを作成するコード
(index.html)
<div style="width: 50%;"> <canvas id="climateChart"></canvas> </div>
(main.js)
const climateChart = document.getElementById('climateChart') new Chart(climateChart, { "type": "bar", "data": { "labels": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], "datasets": [ { "type": "line", "label": "沖縄県・平均気温", "data": [17.0, 17.1, 18.9, 21.4, 24.0, 26.8, 28.9, 28.7, 27.6, 25.2, 22.1, 18.7], "fill": false, "borderColor": "rgb(75, 192, 192)", "backgroundColor": "rgb(75, 192, 192)", "lineTension": 0.1, "yAxisID": "y-axis-2", }, { "type": "line", "label": "東京都・平均気温", "data": [5.2, 5.7, 8.7, 13.9, 18.2, 21.4, 25.0, 26.4, 22.8, 17.5, 12.1, 7.6], "fill": false, "borderColor": "rgb(130, 156, 167)", "backgroundColor": "rgb(130, 156, 167)", "lineTension": 0.1, "yAxisID": "y-axis-2", }, { "type": "bar", "label": "沖縄県・平均降水量", "data": [107.0, 119.7, 161.4, 165.7, 231.6, 247.2, 141.4, 240.5, 260.5, 152.9, 110.2, 102.8], "borderColor": "rgb(75, 192, 192)", "backgroundColor": "rgb(75, 192, 192)", "yAxisID": "y-axis-1", }, { "type": "bar", "label": "東京都", "data": [52.3, 56.1, 117.5, 124.5, 137.8, 167.7, 153.5, 168.2, 209.9, 197.8, 92.5, 51.0], "borderColor": "rgb(130, 156, 167)", "backgroundColor": "rgb(130, 156, 167)", "yAxisID": "y-axis-1", }, ] }, "options": { scales: { yAxes: [ { id: "y-axis-1", type: "linear", position: "left", ticks: { max: 300, min: 0, } }, { id: "y-axis-2", type: "linear", position: "right", ticks: { max: 40, min: -20, }, } ] } } });
線グラフと棒グラフの両方を表示する方法
棒グラフと線グラフを複数表示する方法はすでにやりました。基本的に今回もそれらと同様ですがtypeの指定のみ異なります。
new Chart(climateChart, { "type": "bar", // 最初はbarを指定する "data": { "labels": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], "datasets": [ { "type": "line", // datasets内でtypeの指定をする "label": "沖縄県・平均気温", // 省略 }, { "type": "line", // datasets内でtypeの指定をする "label": "東京都・平均気温", // 省略 }, { "type": "bar", // datasets内でtypeの指定をする "label": "沖縄県・平均降水量", // 省略 }, { "type": "bar", // datasets内でtypeの指定をする "label": "東京都", // 省略 }, ] }, "options": { // 省略 } });
上のようにはじめのtype設定では'bar'を指定します。その後、それぞれのグラフを指定するdatasetsの内部で再度typeの設定をします。このようにして線グラフと棒グラフの複数描画ができます。(すごく単純で直感的で感動)
y軸のメモリを設定する方法
最後にy軸のメモリが気温と降水量で異なるため、左右にメモリを振りましょう。メモリに関することはoptionsで設定します。
| scales/yAxesオプション | |
| id | 作成するメモリのid(後に使う) |
| type | グラフの軸のスケール(線形か対数かなどの指定ができる) |
| position | 左右どちらに表示するか指定できる |
| ticks | メモリの設定(すでに紹介済み) |
今回はtypeは線形のメモリ(メモリの間隔が均等のメモリ)で左右に一つづつ配置するので、以下のような指定になります。
"options": { scales: { yAxes: [ { id: "y-axis-1", type: "linear", position: "left", ticks: { max: 300, min: 0, } }, { id: "y-axis-2", type: "linear", position: "right", ticks: { max: 40, min: -20, }, } ] } }
そして、作成したメモリのidをdatasetsのオプションで各グラフに紐づけることでメモリとグラフの関係が正しく描画されます。
new Chart(climateChart, { "type": "bar", "data": { "labels": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], "datasets": [ { "type": "line", "label": "沖縄県・平均気温", // 省略 "yAxisID": "y-axis-2", //作成した軸のidを紐付け }, { "type": "line", "label": "東京都・平均気温", // 省略 "yAxisID": "y-axis-2", //作成した軸のidを紐付け }, { "type": "bar", "label": "沖縄県・平均降水量", // 省略 "yAxisID": "y-axis-1", //作成した軸のidを紐付け }, { "type": "bar", // 省略 "yAxisID": "y-axis-1", //作成した軸のidを紐付け }, ] }, "options": { scales: { yAxes: [ { id: "y-axis-1", //idの定義 // 省略 }, { id: "y-axis-2", //idの定義 // 省略 } ], } } });
これで完成です！やり方は非常に直感的なので一回このやり方がわかってしまえば他のグラフの描写も比較的スムースに習得できそうです！(むしろドキュメントの説明が少しわかりづらいのでここが一番大事かもしれません。。)
この記事のまとめ
本記事ではChart.jsを用いた線グラフと棒グラフ、そして複合グラフの作成方法について雨温図を例にとって説明しました。最後にこの記事の要点についてまとめておきます！
- Chart.jsのChartインスタンスのオプション設定を指定することで線グラフと棒グラフが作成できる
- インスタンスのオプションにはtypeとdataとoptionsの３つがある
- typeでグラフの種類の指定ができる
- dataでは描画するグラフのデータを記述する
- optionsでは軸の設定を操作することができる
- 複合グラフは複数グラフとの表示と軸の指定をすることで実装できる
是非みなさんもChart.jsを活用してみてください！