背景
- 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を追えば今後の動向がわかることを期待しています。