背景

react-chartjsの使い方で、react-chartjsとChart.js v1を組み合わせた時のクリックイベントの扱い方を書きました。
Chart.js v2でのクリックイベントの扱い方でChart.js v2でクリックイベントの扱い方が変わったことを書きました。
react-chartjsを使って積み上げグラフを描くで、recat-chartjsでChart.js v2を使う方法を書きました。

要約

全部まとめて、react-chartjsでChart.js v2のクリックイベントを扱う方法です。

サンプルコード

index.jsx

index.jsx

const React = require('react')
const ReactDOM = require('react-dom')
const {Bar} = require("react-chartjs")

const chartData = {
  "labels": [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July"
  ],
  "datasets": [
    {
      "label": "Dataset 1",
      "backgroundColor": "rgba(220,220,220,0.5)",
      "data": [
        3,
        -27,
        -46,
        56,
        -87,
        -82,
        86
      ]
    }, {
      "label": "Dataset 2",
      "backgroundColor": "rgba(151,187,205,0.5)",
      "data": [
        -88,
        -78,
        74,
        -32,
        35,
        29,
        62
      ]
    }
  ]
}

const App = React.createClass({
  handleClick(e) {
    const chart = this.Bar.getChart()
    console.log(chart.getElementsAtEvent(e))
  },
  render() {
    return <Bar data={chartData} onClick={this.handleClick} ref={(ref) => this.Bar = ref}/>
  }
})

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

v2での変更点

v1では

this.Line.getPointsAtEvent(e)

のようにChartコンポーネントのメソッドとしてgetPointsAtEventやgetBarsAtEventメソッドを呼べました。

v2では

const chart = this.Bar.getChart()
chart.getElementsAtEvent(e)

v2向けのreact-chartjsには同様のメソッドはありません。
一度getChartメソッドでChart.jsのオブジェクトを取得し

のように、getElementsAtEventメソッドを使って値を取得します。
取得した値はChart.jsのオブジェクトです。
Chart.js v2でのクリックイベントの扱い方を参考にしてください。

動かすには

index.html

index.html

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

ビルド

babelの設定ファイルを作ります。

.babelrc

{
  "plugins": ["transform-react-jsx"]
}

browserifyでビルドします。

npm init -y
npm i -D browserify babelify babel-plugin-transform-react-jsx react react-dom chart.js
npm i -D react-chartjs@git://github.com/reactjs/react-chartjs.git#chartjs-v2
node_modules/browserify/bin/cmd.js -t babelify index.jsx -o bundle.js

react-chartjsのインストール時にgitのブランチを指定します。

今後の動向

v2向けのreact-chartjsは開発中です。
今後、RecatコンポーネントにgetElementAtEvent、getElementsAtEventメソッドが生えるかもしれません。

Issueを作りました。
このIssueを追えば今後の動向がわかることを期待しています。