Chart.js v2.x (とReact)で描く時系列グラフ、レーダーチャート


## 背景

たまたま[react-chartjs(branch:chartjs-v2)](https://github.com/reactjs/react-chartjs/tree/chartjs-v2)を使って **時系列グラフ** と **レーダーチャート** を描くことになったのでメモ。

下に書いた要件で使えるライブラリを探したときに、思いの外使えそうなものが見つからず、結局stable versionでないreact-chartjsの開発ブランチを試してみることに。

開発状況については[こちら](https://github.com/reactjs/react-chartjs/issues/84)

## 要件(選定理由)

* 時系列グラフ(横軸に日時をもつグラフ)が描ける
* レーダーチャートが描ける
* react(redux)と使える（容易に）
* (商用利用無料）※ここはおまけ程度

## 使用技術

* chart.js 2.2.0-rc.2
* react 15.1.0
* react-chartjs (branch: chartjs-v2)
(その他：es6(babel), webpack)

## 流れ

### インストール

```
npm install jhudson8/react-chartjs.git#chartjs-v2 --save
npm install chart.js@2.2.0-rc.2 react@15.1.0 --save
```

### 時系列グラフ(Line time scale chart)を表示する

さっそくimportして、ビルドしてみる
(詳細は割愛するが、背景としてreactを使用。client, server(node)の両方で動かすisomorphicなコードをビルドしている)

```javascript:lineChart.js
import { Line } from 'react-chartjs'

export default class LineChartCanvas extends Component {
    render() {
        return (
            <div>
                <Line data={testdata} options={options} width="600" height="250"/>
            </div>
        )
    }
}
```

いきなりエラー

```console
return window.requestAnimationFrame ||
ReferenceError: window is not defined
```

エラーを見る限り、node環境には未対応っぽい。

issue発見
[server side rendering, getting window is not defined error](https://github.com/reactjs/react-chartjs/issues/57)

コード修正↓

```javascript:lineChart.js
export default class LineChartCanvas extends Component {
    render() {
        let graph;
        if (typeof(window) == 'undefined') {
            graph = (<div></div>);
        } else {
            const Line = require('react-chartjs').Line
            graph = (<Line data={testdata} options={options} width="600" height="250"/>)
        }
        return (
            <div>
                {graph}
            </div>
        )
    }
}
```

とりあえず動く。（もう少しスマートなやり方は追々...）

データを用意

```javascript:LineChart.js
const testdata = {
    labels: ["2016-03", "2016-04", "2016-05", "2016-06", "2016-07"],
    datasets: [
        {
            label: "test data",
            data: [{
                x: "2016-03-16",
                y: 20
            },{
                ... // 一部データ省略
            },{
                x: "2016-07-11",
                y: 40
            }],
            ... // 一部設定値省略(長いので...)
        }
    ]
};

const options = {
    ... // 長くなるので割愛
    title:{
        display:true,
        text:"Chart.js Time Scale"
    },
    scales: {
        xAxes: [{
            type: "time",
            time: {
                format: "YYYY-MM",
                unit: "month",
                displayFormats: {
                    month: 'YYYY-MM'
                },
                tooltipFormat: 'll'
            },
            scaleLabel: {
                display: true,
                labelString: 'Date'
            }
        }, ],
        yAxes: [{
            scaleLabel: {
                display: true,
                labelString: 'points'
            },
            ticks: {
                beginAtZero: true
            }
        }]
    },
}
```

再ビルド後、画面表示↓

![](https://lh3.googleusercontent.com/H3TJ8NF7S2OKQziLbeJyt7Yz1B0SStFyjiAKAPge0KONPGgkPqnjghg5lgMylWzAqtJnDs34scHr3I3CSBsA4uPGlJfH2j5nm1tjbrS8ndw4z1H5CLY1THZAc-s0her1gOhpwQ_bdjwR-JQL_Oe8AfoMPZaU7CtxYp-sF7e8PgLo24P2EKrdEVviuS8DOjfsy2ez8peg0WfoY-6xAGwM8aWR8WABtma96rpAmor5Xzy1xfyGxLgsW9uMzb9v1k2h0husG7U9lpSW_cWDZrfzlrZ-KOpQuMLVd-8FkCR7Mr1exubEduT-phjj7DKypqf0kc7egVCUW6FmcwnmZYbQkLzGOl8qcemgG5KtQ8lOkF2mAJ_xjX7ygmxbZ0D6B-uPXP0BLayXiVNMz3ng86mTm44MpctCx8Lrp1NMZB2fAGyJk55fNY1E32KQegCQ_h6Ilw2W3VffkutaPCe3dDkIwZ4mJenij_uibSRu-oswPXvdTf-GBpZB-_nmhSsrMetGmHxtohBCACKZkw131UJFiaizJtKCGS6xC2n7H3NdFmSEHAAcIsdjFiGJfe_qt2ZHJf3BCP5EDgc-90WS3BYdgaMqgghmJVY=w752-h286-no)

ラベルとデータ内の日付文字列もきちんとdateとして認識されていて、いいかんじ。
（内部的にはmoment.jsを使用している模様）

参考サイト
[github: chartjs/Chart.js/docs/02-Scales.md](https://github.com/chartjs/Chart.js/blob/b6686f00f4670a03ed242db13a80a0d6f9399af2/docs/02-Scales.md)

[github: chartjs/Chart.js/samples/timeScale/line-time-scale.html](https://github.com/chartjs/Chart.js/blob/master/samples/timeScale/line-time-scale.html)

[Chart.js公式docs](http://www.chartjs.org/docs/)

[github reactjs/react-chartjs](https://github.com/reactjs/react-chartjs/tree/chartjs-v2/lib)

### レーダーチャート(Radar chart)を表示する

こちらは、すんなり

```javascript:radarChart.js
const testdata = {
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    datasets: [{
        label: "My Status",
        data: [100, 40, 80, 60, 80, 20, 30],
        backgroundColor: "rgba(62, 253, 52, 0.4)",
        borderColor: "rgba(62, 253, 52, 1.0)"
    }]
}

const options = {
    legend: {
        position: "top"
    },
    title: {
        display: true,
        text: 'Chart.js Radar Chart'
    },
    scale: {
        reverse: false,
        ticks: {
            beginAtZero: true
        }
    }
}

export default class RadarChartCanvas extends Component {
    render() {
        let graph;
        if (typeof(window) == 'undefined') {
            graph = (<div></div>);
        } else {
            const Radar = require('react-chartjs').Radar
            graph = (<Radar data={testdata} options={options} width="250" height="200"/>)
        }
        return (
            <div>
                {graph}
            </div>
        )
    }
}
```

きれいにレーダーチャートも表示されました。

![](https://lh3.googleusercontent.com/YmRlLoFVhibSa0TsuGSrDbA96-diNQZG7j-OXymaZTTHH_qrHaDuybp0lhjenvDAeVdFPJS4RIz4Ajpypv-VYTGRcBt5FGj4kaYYWFZS5h2F1aTt0dr6zxzv8nADl6_jMU-EpwBAp9WVd39oFXqz_ILbbGyv7xG6KwdrYq-K-UHsmqjj3zgFgEEOA6oJ-qNAVgevbe72rCxMLI524mDUx_LGrT-3FjoH3Fcvqdxa4y2neZklyF6i1AxAC68w-4ZuGoKj88_rV3Kq6q98ylqzrnvLCGJRA05HNNai59MtaSR6YTp_XDYjXWzrE6vL_0QNtoEuvXOrU6ahohrlgIvsbpBEA33IWN8hc2Hp03sRLZ6J07rSry2TP8-Me7W9QT076daAIQFsBeRnh4ASUanpKM-6Mt1IOLrioOHOhJAANg_LBnzoagSgmjU3_-pM6RlCKVsjcsNPpCQNxA3Yba0cq0iOp38dTVW4c3E9bcPxLJ3wUfcJAyXPd9XV-b8zcLRwJCYqWckdXW4gWlZF2hzVMoiDCARyMC5eWEfmUmOjmEe-YdUVQ12S4wkWmlYdtRURZU2t5eGFLt3jW-ctGk6g5sfcUQUHwHc=w516-h423-no)

参考サイト：

[github: chartjs/ Chart.js/samples/radar.html](https://github.com/chartjs/Chart.js/blob/master/samples/radar.html)

[Chart.js公式docs](http://www.chartjs.org/docs/)


まず簡単に動かすとこまではこんな感じです。
デザインも使い方自体も結構シンプルでいい感じですね。Chart.jsいいよ。