XML＋Flashでグラフを作成

　FusionChartsでは、グラフのデータをXML形式で記述し、それをFlashを用いて描画する。Flashを利用しているのでアニメーションを駆使した見栄えのよいグラフを作成することができる。とは言っても、Flash側のファイルは一切いじる必要はなく、自分で書かなければならないのは元データとなるXMLと、それをFlashオブジェクトに読み込ませるためのHTMLだけだ。

　したがって、サーバ・サイドの技術やプログラミングに関する知識が無くても利用することができる。一方でJavaScriptやPHP、JSP、ASP、ASP.NET、Ruby on Railsなどに対応したライブラリも提供されており、Webアプリケーションから利用したい場合にはこれらのライブラリを使えばよい。FusionCharts Freeで作成できるグラフとしては次のようなものがある。

　この他の棒グラフと折れ線グラフを組み合わせて使うこともできる。公式サイトで公開されているチャート・ギャラリーを見れば、各グラフの描画の様子がよくわかるだろう。

　元となるXML形式のデータには様々なパラメータが用意されており、これを1から記述するのはそれほど容易ではない。しかし、FusionChartsには「Chart XML Reference」として、さまざまなグラフを記述する場合のXMLがまとめられているため、これを雛型とすることで一般的なグラフであれば問題なく作成することができる。また、有償版にはXMLデータをグラフィカルなインタフェースで作成するためのツールが付属している。

　有償版とフリー版のその他の相異点は、このページにまとめられている。有償版では、利用できるグラフの種類が多く、また、さまざまな機能やツールが追加されるようだ。ベースとなるFlash技術も、フリー版がFlash MX / ActionScript 1なのに対して、有償版はAdobe Flash 8 / ActionScript 2となっている。

環境の準備

　FusionChart Freeは、このページよりダウンロードすることができる。ダウンロードには名前とメール・アドレスの登録が必要。ダウンロードしたファイル（FusionChartsFree.zip）を展開すると、次のようなディレクトリ構成になっている。

　最初に、Webブラウザでindex.htmlを開いてサンプル・ギャラリー（画面1）やChart XML Referenceなどに目を通しておくといいだろう。

画面1：サンプル・ギャラリーではグラフの作成例とソースコードを見るとことができる

　FusionChartsを利用する際に絶対に必要なのは、Chartsディレクトリ以下にあるswfファイルである。そして、プログラミング言語から利用する場合は、Codeディレクトリ以下のファイルが必要となる。また、グラフを（objectタグではなく）scriptタグでページに埋め込みたい場合には、JSClass以下のFusionCharts.jsが必要となる。

　これらのディレクトリを、Webサーバのコンテンツ用ディレクトリに配置する。本稿の例では、環境設定の手間を省くために「XAMPP」を利用し、htdocsディレクトリ以下にCharts、Code、JSClassの3つのディレクトリをコピーして使用する。作成したHTMLファイルとXMLファイルはhtdocs/FusionChartsSampleディレクトリに配置することにする。