react-chartjsの使い方


[react-chartjs](https://github.com/jhudson8/react-chartjs)は[Chart.js](http://www.chartjs.org/)のReact componentです。

# 使用例
## ゴール
次の線グラフを表示します。

![スクリーンショット 2016-06-15 16.51.09.png](https://qiita-image-store.s3.amazonaws.com/0/15964/ef51b9d5-f338-6f48-bc40-b7be31c0ef2e.png "スクリーンショット 2016-06-15 16.51.09.png")

## コンポーネントを定義

```js:index.jsx
const React = require('react')
const ReactDOM = require('react-dom')
const {Line} = require("react-chartjs")

const chartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [65, 59, 80, 81, 56, 55, 40],
        }
    ]
}

const App = () => (
  <Line data={chartData} width="600" height="250"/>
)

ReactDOM.render(
  <App/>, document.querySelector('#container'))
```

## 動かす

### index.html
```
<!DOCTYPE html>
<html>
  <body>
    <div id="container">
    </div>
    <script src="bundle.js"></script>
  </body>
</html>
```

### browserifyでビルド
babelの設定ファイルを作ります。

```js:.babelrc
{
  "plugins": ["transform-react-jsx"]
}
```

ビルドします。

```
npm init -y
npm i -D browserify babelify babel-plugin-transform-react-jsx react react-dom react-chartjs chart.js@^1.1.1
node_modules/browserify/bin/cmd.js -t babelify index.jsx -o bundle.js
```

index.htmlをブラウザで開きます。

# 応用例：クリックイベントを拾う
## コンポーネント定義
`App`コンポーネントを次のように変更します。

```js
const App = React.createClass({
  handleClick(e) {
    console.log(this.Line.getPointsAtEvent(e)[0]);
  },
  render() {
    return (<Line data={chartData} width="600" height="250" onClick={this.handleClick} ref={(ref) => this.Line = ref}/>)
  }
})
```

- Chart.jsではeventから要素を取得する`getPointsAtEvent`関数があります。react-chartjsでも使えます。
- Reactでは`onClick`属性を使って、イベントハンドラーをバインドできます。
- Reactでは`ref`属性を使って、Renderした子コンポーネントのインスタンスが取得できます。


## 動作イメージ

グラフ上で吹き出しが表示されている位置でクリックすると、吹き出しが出ている要素の値を取得できます。

![スクリーンショット 2016-06-15 17.23.50.png](https://qiita-image-store.s3.amazonaws.com/0/15964/8e23277a-c1e0-d32d-06f9-59c932de1cd0.png "スクリーンショット 2016-06-15 17.23.50.png")


# Chart.js 2.0への対応
Chart.jsの最新バージョンは`v2.1.6`です。
react-chartjsはv1.1.1まで対応しています。

Chart.js2.0以降への対応は[chartjs-v2](https://github.com/jhudson8/react-chartjs/tree/chartjs-v2)ブランチで開発されています。

`package.json`で、`"react-chartjs": "git://github.com/venari/react-chartjs.git#chartjs-v2"`のようにブランチを直接指定すれば、利用可能です。

[What's the plan to upgrade to chart.js 2.0? · Issue #84 · jhudson8/react-chartjs](https://github.com/jhudson8/react-chartjs/issues/84)で開発状況をみることができます。
そろそろリリースされると嬉しいですね。

# 参考
- [javascript - Chart.js: Get point index from chart.getPointsAtEvent(e) - Stack Overflow](http://stackoverflow.com/questions/31253468/chart-js-get-point-index-from-chart-getpointsatevente)
- [Refs to Components | React](https://facebook.github.io/react/docs/more-about-refs.html)