React.js + Chart.jsでインタラクティブなグラフを書く - Qiita

#概要 例えば、以下の様にグラフと表が一緒になっているページがあるとします。使用者が同ページで新規にデータを追加した直後に、表に新データが挿入されるとともにグラフも更新されるようなインタラクティブなページを作りたく、React.jsのアプリケーション内部でChart.jsを使用してみました。React.jsの状態データ(this.state)を元にChart.jsにグラフを書かせる手法です。 Rails、CoffeeScriptでJSXを使用せず書きました。 #環境 ruby 2.2.1 Rails 4.2.3 react-rails chart-js-rails bootstrap font-awesome-rails 他 #手順 ##グラフのキャンバスを定義。 ここで定義したキャンバスを後にメインの部品のrenderメソッドで呼び出し、キャンバスのオブジェクトを作ります。 # Reac