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

背景

たまたまreact-chartjs(branch:chartjs-v2)を使って 時系列グラフ と レーダーチャート を描くことになったのでメモ。

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

開発状況についてはこちら

要件(選定理由)

• 時系列グラフ(横軸に日時をもつグラフ)が描ける
• レーダーチャートが描ける
• 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なコードをビルドしている)

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>
        )
    }
}

いきなりエラー

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

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

issue発見
server side rendering, getting window is not defined error

コード修正↓

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>
        )
    }
}

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

データを用意

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
            }
        }]
    },
}

再ビルド後、画面表示↓

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

参考サイト
github: chartjs/Chart.js/docs/02-Scales.md

github: chartjs/Chart.js/samples/timeScale/line-time-scale.html

Chart.js公式docs

github reactjs/react-chartjs

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

こちらは、すんなり

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>
        )
    }
}

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

参考サイト：

github: chartjs/ Chart.js/samples/radar.html

Chart.js公式docs

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