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 [email protected] [email protected] --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 좋아.