JavaScript
React
c3.js

ReactでC3.jsを使いたい


D3.jsのお手軽版👉C3.js

SPAを開発しているとグラフを描画する必要があるケースは少なくないと思います。 D3.jsはカスタマイズ性に強く、「あれも欲しいこれも欲しい」開発者の皆さんにとっては魅力的であると思います。

しかし、痒い所に手が届くライブラリはなんでもできるが故に、その「なんでも」を実装する為に骨が折れるわけです。公式のexampleやdocumentを見ながら自分の欲しいものを作るのはググり力に長けたエンジニアの方々にとっては朝飯前だと思いますが、私のようなペーペーエンジニアにはとても頭がいたいです。

そんなペーペーエンジニアの私を救ってくれたのが C3.js です。

D3.js簡単にいい感じに書けるようにしてくれているのが C3.js です。

今回は私がReactでSPAを開発している際に、グラフ描画を実装する為にC3.jsを使ったこともあり、ReactでのC3.jsの使い方をここの記録しました。


環境

node v11.3.0

react ^16.8.2

c3 ^0.6.13


ReactでC3.jsを導入


C3のパッケージ追加

yarn add c3


C3のcssをApp.jsに追加

C3.js でグラフを表示する際、c3.css をimportしておかないとスタイルが崩れたものが表示されてしまいます。

私はいつもcssの読み込みを App.js に書いているので以下のようになります。


App.js

import React from 'react';

import 'c3/c3.css';


cssの読み込みをどこでやるのがパフォーマンス上一番いいかについては私の勉強不足でわかりません。。。

(詳しい方、教えていただきたいです🙇‍♀️)

ペーペーエンジニアの私はこのimportをせずに「なんでスタイル崩れてんだろ...」と30分〜1時間ハマりました。


公式のexampleを触ってみる()

公式のexampleで C3.js を感じてみます。

ラインチャートを描画するReactのコンポーネントはこんな感じになりました。 componentDidMount() 内でDOMを操作してグラフを描画するようにします。render() 内で c3.generate() を呼ぶと初回render時に id="chart"<div /> が無いのでグラフを描画することができません。

また下の例では意味がなくなてしまっていますが、propsでグラフのデータを受け取って、グラフを動的に変化させたい場合もあると思います。その場合はcomponentDidUpdate()内で this.chart.load({ columns: 新しいデータオブジェクト }) することでデータを更新し、新しいデータに基づいてグラフを動的に更新することができます。


LineChart.js

import React from 'react';

import c3 from 'c3';

const DUMMY_DATA = [
['data1', 300, 350, 300, 0, 0, 100],
['data2', 130, 100, 140, 200, 150, 50],
['data3', 10, 200, 0, 10, 50, 50],
];

export default class LineChart extends React.Component {
componentDidMount() {
this.renderGraph();
}
componentDidUpdate() {
this.loadGraphData();
}

render() {
return (
<div id="chart" ref={node => (this.node = node)} />
);
}

renderGraph() {
this.chart = c3.generate({
bindto: '#chart',
data: {
columns: DUMMY_DATA,
type: 'line',
},
});
}
}



まとめ

軽く触っただけですが、 C3.jsD3.jsよりもかなり触りやすいと思いました。その分、カスタマイズ性が犠牲になっているとは思いますが、私の今回の直近の例ではそこまでカスタマイズ性は求められなかったので、C3.jsで事足りました。

気軽にReactでD3.jsを使ってみたいという方にはいいかもしれません。