react-chartjsはChart.jsのReact componentです。
使用例
ゴール
次の線グラフを表示します。
コンポーネントを定義
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の設定ファイルを作ります。
.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コンポーネントを次のように変更します。
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した子コンポーネントのインスタンスが取得できます。
動作イメージ
グラフ上で吹き出しが表示されている位置でクリックすると、吹き出しが出ている要素の値を取得できます。
Chart.js 2.0への対応
Chart.jsの最新バージョンはv2.1.6です。
react-chartjsはv1.1.1まで対応しています。
Chart.js2.0以降への対応は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で開発状況をみることができます。
そろそろリリースされると嬉しいですね。