JavaScriptでアニメーションを用いたグラフを作る

JavaScriptでグラフを作る方法として「Highchart」「ccchart」「D3」など様々ありますが、今回はGoogle Chart Toolsを使用したアニメーショングラフ作成をしてみます。

まずはソースコードを公開↓

最初に上段に記載されているグラフを表示する関数からの説明ではなく、下段のプログラムについて説明します。

Sample.phpについて
はじめに「 require_once 」で外部ファイルを呼び出しています。
この場合は、「 Google_Graph.php 」にグラフを定義しているため、Google_Graph.phpを呼び出しています。

次に$csvにテストデータを代入しています。
多次元配列にしたほうが便利なので多次元配列にしています。
注意する点として、文字列をデータとして扱うときは必ず’ ‘(シングルクォーテーション)で囲ってください。
そうしないとグラフ表示されません。

あとは縦棒グラフとか横棒グラフなどの関数を呼び出してprintで出力しています。

Google_Graph.phpについて
縦棒グラフ、横棒グラフ、円グラフ、折れ線グラフの4つのグラフを関数化しています。

縦棒グラフ・・・function tatebou_graph($id, $data, $label)
横棒グラフ・・・function yokobou_graph($id, $data, $label)
円グラフ・・・function en_graph($id, $data, $label)
折れ線グラフ・・・oresen_graph($id, $data, $label)

それぞれの引数は、
$id – グラフのユニークなID
$data – グラフに表示するデータ要素
$label – タイトル名、縦軸名、横軸名
となっています。

Googleグラフにアニメーションを付加する方法として、data.setValueでデータを再定義する方法がありますが(詳しくはここ)、データの個数分setValueをセットする必要があります。
個人的にはめんどくさいなぁと思ったので、
google.visualization.arrayToDataTable()
を二回行うことでグラフの値を書き換えて出力しています。

上記の関数以外にも、
function data_change($data)
function data_initialize($data)
があります。
それぞれ、data_change$data()では貰ったデータをグラフに表示できるように最適化を行っています。
data_initialize()では、すべてのデータ要素を初期化しています。
グラフを表示する際、はじめに初期化したデータを表示し、次に表示したいデータをアニメーションによって表示を行います。

実行結果

GoogleChartToolsのアニメーションについては違う記事で詳細に書こうと思います。

スポンサーリンク