Chart.jsとAngular JSを組み合わせて動的なグラフを生成してみる

chartjs-demo

前回に引き続き、Chart.jsのTipsです。

今回はAngular.jsChart.jsを組み合わせて、動的に値が変化するグラフを作ります。

Angular.jsの基本的な使い方は割愛します。
ちなみに今回使用するバージョンは下記のとおりです。

  • Angular JS v1.4.9
  • Chart.js v1.0.2

Angular.jsでフォームをバインドする

まずはangular.min.jsを下記サイトよりダウンロードしてきましょう。

Angular JS

CDNにも公開されていますが、セキュリティ面で外部ソースを引っ張るのはあまり良くないとのことですのでダウンロード版を使いましょう。
(今回のデモを作る程度でしたら、CDNでも問題ありません。)

コントローラー&フォームバインドの簡単なコードが下記です。

上記のコードにより、下のようにユーザーの入力によって値を変更することが出来ます。

TEXT:
入力して下さい。
バインディング結果:{{form.text}}

Angular JSとChart.jsを組み合わせてみる

前章の様にユーザーが入力した値を使って、Chart.jsのグラフを動的に変化させてみたいと思います。
内部的にはコントローラー内でChart.jsのデータを差し替えることによって可能です。
早速ですが、ソースがこちらです。

特に大事な点としては、上記コードのハイライト部分、Chart.jsの再描画です。

この部分でグラフの値を変更し、再描画しています。
ちなみに、ドーナツグラフやレーダーチャートなどでは差し替えるプロパティが変わります。

DEMOを見る

以上のコードを実行したものが、こちらのDEMOになります。(表示上、多少ソースを変更しております。)
数値を変更したらグラフへもすぐに反映されます。

{{item.month}}月:
1~1000間で
入力して下さい。

非常に短いコードで、こんなにインタラクティブで有用なコンテンツを作ることが出来ます。
viva Angular!! viva Chart.js!!
ちなみにChart.jsやAngular JSをWordPressの特定記事内で使用する方法は、下記ページの方法を応用しております。
WordPress:特定の記事の中でThree.jsを使う方法