目的
グラフ描画に定評？がある「Chart.js」。
「react-chartjs-2」を使いReactアプリケーションでの実装方法の手順を理解していきます。
【公式サイト】
Chart.js：https://www.chartjs.org/
react-chartjs-2：https://github.com/jerairrest/react-chartjs-2
【続きもの】
ReactとChart.jsでグラフを描画する <- now
ReactとChart.jsでグラフを複数描画する
完成イメージ
表示データ：2019年東京の「降水量の月合計」
実装結果だけ見たい方はこちらへ↓
コード
実装準備
実装に必要なモジュールをインストールしていきます。
Reactアプリケーションを作成
npx create-react-app chart-js
react-chartjs-2をインストール
Chart.js2をReactにラッパーされたものを今回は使っています。
公式サイト：https://github.com/jerairrest/react-chartjs-2
npm install --save react-chartjs-2 chart.js
Chart.jsのコンポーネントを確認
用意されているChart.jsで使用できるグラフのコンポーネントはこちら。
それぞれがどんなグラフかは公式サイトを参照してください。
export class Doughnut extends ChartComponent<ChartComponentProps> {}
export class Pie extends ChartComponent<ChartComponentProps> {}
export class Line extends ChartComponent<LinearComponentProps> {}
export class Scatter extends ChartComponent<ChartComponentProps> {}
export class Bar extends ChartComponent<LinearComponentProps> {}
export class HorizontalBar extends ChartComponent<ChartComponentProps> {}
export class Radar extends ChartComponent<ChartComponentProps> {}
export class Polar extends ChartComponent<ChartComponentProps> {}
export class Bubble extends ChartComponent<ChartComponentProps> {}
基本的な使い方
描画したいグラフコンポーネントにグラフデータとオプションを渡してあげればOK
<Bar data={/**graphDataObject*/} options={/**graphOptionObject*/} />
実装
今回表示するデータは2019年の東京の「降水量の月合計」を表示するグラフを作っていきます。
ちなみにデータは気象庁のページから取得できます。（https://www.data.jma.go.jp/gmd/risk/obsdl/index.php）
では、以下から実装していくっ。
グラフを描画する。
早速実装コードとその画面はこんな感じです。
import React from 'react';
import { Bar } from 'react-chartjs-2';
import './App.css';
function App() {
const graphData= {
labels: [
// 軸ラベル
// 各ラベルを配列にすることで軸ラベルが改行されて表示される
['2019年', '1月'],
['2019年', '2月'],
['2019年', '3月'],
['2019年', '4月'],
['2019年', '5月'],
['2019年', '6月'],
['2019年', '7月'],
['2019年', '8月'],
['2019年', '9月'],
['2019年', '10月'],
['2019年', '11月'],
['2019年', '12月'],
],
datasets: [
// 表示するデータセット
{
data: [16, 42, 117.5, 90.5, 120.5, 225, 193, 110, 197, 529.5, 156.5, 76.5],
label: '月別合計降水量(mm)',
},
],
};
return (
<div className="App">
{/* グラフコンポーネントの呼び出し */}
<Bar data={graphData} />
</div>
);
}
export default App;
画面
このようにコンポーネントにdataプロパティを付けることでグラフを表示することが出来ます。
これだけではグラフとしてそっけないので、オプションを追加していきます。
//（省略）
function App() {
/** グラフデータ */
const graphData = {
labels: [
// （省略）
],
datasets: [
{
data: [16, 42, 117.5, 90.5, 120.5, 225, 193, 110, 197, 529.5, 156.5, 76.5],
backgroundColor: 'rgba(30, 144, 255, 1)', // <--追加
label: '月別合計降水量(mm)',
},
],
};
/** グラフオプション */
const graphOption = {
scales: {
xAxes: [ // x軸設定
{
scaleLabel: { // 軸ラベル設定
display: true,
labelString: '2019年',
},
},
],
yAxes: [ // y軸設定
{
scaleLabel: {
display: true,
labelString: '合計降水量(mm)',
},
ticks: { // 軸目盛設定
beginAtZero: true,
callback: function (value, index, values) {
return `${value}(mm)`;
},
},
},
],
},
};
return (
<div className="App">
{/* グラフコンポーネントの呼び出し */}
<Bar data={graphData} options={graphOption} />
</div>
);
}
export default App;
画面はこんな感じ。
グラフのdatasetsに色を付け、グラフコンポーネントにoptionsを追加しました。。
これだけでも意外とそれっぽくなりますね。
オプションの各項目の詳細は公式サイトを参考にしてください。
まとめ
グラフ描画のライブラリにはD3.jsが人気という話もあるが、簡単なグラフを表示するだけならChart.jsのほうがサクッとでき印象です。
次は複数のグラフを同時に表示する複合グラフを作っていこうと思います。
ReactとChart.jsでグラフを複数描画する
最後に今回のコードを載せておきます。
コード
import React from 'react';
import { Bar } from 'react-chartjs-2';
import './App.css';
function App() {
/** グラフデータ */
const graphData = {
labels: [
// 軸ラベル
// 各ラベルを配列にすることで軸ラベルが改行されて表示される
['2019年', '1月'],
['2019年', '2月'],
['2019年', '3月'],
['2019年', '4月'],
['2019年', '5月'],
['2019年', '6月'],
['2019年', '7月'],
['2019年', '8月'],
['2019年', '9月'],
['2019年', '10月'],
['2019年', '11月'],
['2019年', '12月'],
],
datasets: [
// 表示するデータセット
{
data: [5.6, 7.2, 10.6, 13.6, 20, 21.8, 24.1, 28.4, 25.1, 19.4, 13.1, 8.5],
backgroundColor: 'rgba(30, 144, 255, 1)',
label: '月別合計降水量(mm)',
},
],
};
/** グラフオプション */
const graphOption = {
scales: {
xAxes: [
// x軸オプション
{
scaleLabel: {
// x軸ラベルオプション
display: true,
labelString: '2019年',
},
},
],
yAxes: [
// y軸オプション
{
scaleLabel: {
// y軸ラベルオプション
display: true,
labelString: '合計降水量(mm)',
},
ticks: {
// y軸メモリオプション
beginAtZero: true,
callback: function (value, index, values) {
return `${value}(mm)`;
},
},
},
],
},
};
return (
<div className="App">
{/* グラフコンポーネントの呼び出し */}
<Bar data={graphData} options={graphOption} />
</div>
);
}
export default App;