ReactとChart.jsでグラフを描画する

# 目的
グラフ描画に定評？がある「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でグラフを描画する](https://qiita.com/eiji-noguchi/items/33ecfd3298f3ac974aa7) <- now
[ReactとChart.jsでグラフを複数描画する](https://qiita.com/eiji-noguchi/items/3ab0af5058fb47dc0caa)

# 完成イメージ
表示データ：2019年東京の「降水量の月合計」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/bb9423ce-3166-5cc9-c250-70fe0fc369f1.png)

実装結果だけ見たい方はこちらへ↓
[コード](#コード)

# 実装準備
実装に必要なモジュールをインストールしていきます。

## Reactアプリケーションを作成
```
npx create-react-app chart-js
```

## react-chartjs-2をインストール
[Chart.js2](https://www.chartjs.org/)をReactにラッパーされたものを今回は使っています。
公式サイト：https://github.com/jerairrest/react-chartjs-2

```
npm install --save react-chartjs-2 chart.js
```

## Chart.jsのコンポーネントを確認
用意されているChart.jsで使用できるグラフのコンポーネントはこちら。
それぞれがどんなグラフかは公式サイトを参照してください。


```react
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

```react
<Bar data={/**graphDataObject*/} options={/**graphOptionObject*/} />
```

# 実装
今回表示するデータは2019年の東京の「降水量の月合計」を表示するグラフを作っていきます。
ちなみにデータは気象庁のページから取得できます。（https://www.data.jma.go.jp/gmd/risk/obsdl/index.php）

では、以下から実装していくっ。

## グラフを描画する。
早速実装コードとその画面はこんな感じです。

```react:App.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: [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;
```

画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/39042ade-e3d3-45f1-093f-833c09383986.png)


このようにコンポーネントに`data`プロパティを付けることでグラフを表示することが出来ます。
これだけではグラフとしてそっけないので、オプションを追加していきます。

```react:App.js

//（省略）

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;
```
画面はこんな感じ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/bb9423ce-3166-5cc9-c250-70fe0fc369f1.png)


グラフの`datasets`に色を付け、グラフコンポーネントに`options`を追加しました。。
これだけでも意外とそれっぽくなりますね。
オプションの各項目の詳細は公式サイトを参考にしてください。

# まとめ
グラフ描画のライブラリには[D3.js](https://d3js.org/)が人気という話もあるが、簡単なグラフを表示するだけならChart.jsのほうがサクッとでき印象です。
次は複数のグラフを同時に表示する複合グラフを作っていこうと思います。
[ReactとChart.jsでグラフを複数描画する](https://qiita.com/eiji-noguchi/items/3ab0af5058fb47dc0caa)

最後に今回のコードを載せておきます。

# コード
```react:App.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;

```