アニメーションがカッコいいグラフ描画ライブラリ FusionCharts を使ってみた
こんにちは。松田です。
今日はグラフ描画ライブラリのFusionChartsを使ってみたいと思います。
FusionChartsのグラフ描画エンジンはFlashで出来ているので、Flashが得意なアニメーションなどを駆使して非常に見栄えのよいグラ フを描画することができます。
また、データのXMLファイルをいじるだけで、PHPなどのプログラミングの知識がなくてもこれらのグラフを書くことができるのも特徴です。
下のリンクから「View」ボタンを押すとデモをみることができますが、かなりカッコいいグラフが表示できます。
http://www.fusioncharts.com/LiveDemos.asp?gMenuItemId=4
FusionChartsには有償版、有償版のトライアルバージョン、Free版などがありますが、今回はこのFree版であるFusionChartsFreeとPHPを使って棒グラフを作ってみたいと思います。
FusionChartsFreeは有償版と比べいくつかの機能が削られていますが、基本的な動作はほとんど変わりません。
下記に有償版とFree版の違いが乗っていますが、主にエフェクトの有無のようですね。
http://www.fusioncharts.com/free/Comparison.asp?gMenuItemId=6
Free版は非商用目的にのみ使うことができ、商用利用する際にはライセンスを購入する必要があります。
■ダウンロードとインストール
それではまずはライブラリをダウンロードしましょう。
以下のURLを開き、必要な項目を入力して「Download」ボタンを押します。
http://www.fusioncharts.com/free/Download.asp?gMenuItemId=5
その後ダウンロード用のアイコンが表示されるので、それをクリックしてFusionChartsFree.zipをダウンロードします。
これを解凍すると中には以下のファイルとフォルダが含まれています。
Charts/
Code/
Contents/
JSClass/
Index.html
このIndex.htmlはFusionChartsFreeのドキュメントになっていますが、今回ここで書くことはこれの触りの部分を軽くまとめただけなので、こっちも目を通しておくと良いでしょう。
今回はPHPで実装することにしますが、その際に必要になるファイルは以下のものだけです。
Charts/
Code/PHP/
JSClass/
これらをルートディレクトリ以下の好きな場所に設置してください。
■データXMLファイルの作成
FusionChartsはグラフのベースとなるswfファイルに、XML形式で記述したデータを読み込ませることでグラフを出力します。
まずはそのデータXMLを作成しましょう。
以下をData.xmlという名前で保存し、Dataディレクトリあたりに入れておきます。
<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'>
<set name='Jan' value='462' color='AFD8F8' />
<set