2007年10月16日

アニメーションがカッコいいグラフ描画ライブラリ 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 name='Feb' value='857' color='F6BD0F' />
    <set name='Mar' value='671' color='8BBA00' />
    <set name='Apr' value='494' color='FF8E46' />
    <set name='May' value='761' color='008E8E' />
    <set name='Jun' value='960' color='D64646' />
    <set name='Jul' value='629' color='8E468E' />
    <set name='Aug' value='622' color='588526' />
    <set name='Sep' value='376' color='B3AA00' />
    <set name='Oct' value='494' color='008ED6' />
    <set name='Nov' value='761' color='9D080D' />
    <set name='Dec' value='960' color='A186BE' />
</graph>

■グラフ出力スクリプトの作成

次はHTML側を記述します。以下のファイルをgraph.phpとして保存します。


<?php
include("Code/PHP/Includes/FusionCharts.php");
?>
<HTML>
   <HEAD>
      <TITLE>FusionCharts Free - Simple Column 3D Chart</TITLE> 
   </HEAD>
   <BODY>
   <?php
      echo renderChartHTML("Charts/FCF-Column3D.swf", "Data/Data.xml", "", "myFirst", 600, 300); 
   ?>
   </BODY>
</HTML>

これで準備完了です。早速開いてみましょう。
これだけでうにょーんと伸びる棒グラフが完成しました。なかなかカッコいいです。

ここで使用したrenderChartHTML()関数がFlashの表示に必要なタグを勝手に生成してくれます。
引数は以下の通りです。


renderChartHTML($chartSWF, $strURL, $strXML, $chartId, $chartWidth, $chartHeight)


$chartSWF・・・グラフの基本swfファイル
$strURL　・・・データXMLファイルの位置を指定する
$strXML　・・・データXMLファイルを文字列として渡す
$chartID ・・・出力されるグラフの<object>タグのid
$chartWidth・・・グラフの幅
$chartHeight・・・グラフの高さ

$strURLにはXMLデータを出力するURLを指定し、$strXMLではXMLを文字列で渡すことができます。この二つはどちらかが指定されていれば良いので、使用しないほうには空文字「""」を指定しておきます。

DBから値を読み込んでグラフを動的に生成する場合などは、DBのデータからXML形式の文字列を生成し、$strXMLに渡すことになります。

■あれ？JSClassは使わんの？

さて、これで基本的なグラフは作れたわけですが、解凍したファイルのJSClass/FusionCharts.js はまだ使っていません。
これはいったいなんに使うんでしょう。

どうやらFusionChartsでは、グラフの出力を

1. <Object>タグによるHTML出力
2. <script>タグによるJavaScript出力

の二つから選べるようです。
JSClass/FusionCharts.js はこの2つ目の方法で出力する場合に必要となります。


<?php
include("Code/PHP/Includes/FusionCharts.php");
?>
<HTML>
   <HEAD>
      <TITLE>FusionCharts Free - Simple Column 3D Chart</TITLE> 
      <SCRIPT LANGUAGE="Javascript" SRC="JSClass/FusionCharts.js"></SCRIPT>
   </HEAD>
   <BODY>
   <?php
      echo renderChart("Charts/FCF_Column3D.swf", "Data/Data.xml", "", "myFirst", 600, 300, false, false);
   ?>
   </BODY>
</HTML>

Objectタグで出せれば十分なのに、なんでわざわざ<script>タグで出す必要があるの？と思った人もいるでしょう。

上のグラフを見て気付いた人がいるかもしれませんが、グラフにカーソルを乗せるとブラウザによっては、
「クリックするとこのコントロールをアクティブにして使用します」
というホバーメッセージが現れ、一度グラフをクリックするまで正常に表示させることが出来ません。
わざわざ2種類の出力方法が用意されているのは、この問題を回避するためのようです。

そして下が実際の表示結果です。これならメッセージは出ないはずです。

Chart.

■グラフ表示のカスタマイズ

グラフの表示形式は、全てデータXMLの属性値を変化させることで実装します。
基本はすべてドキュメントに載っていてそちらのほうが分かりやすいので、その中から使いそうなものだけを軽く紹介します。

・特定のバーだけ非表示にする。
<set>タグのvalue属性を消す。

・X軸のラベルを90度傾ける
<graph>タグに「rotateNames='1'」属性を付ける

・X軸のラベルを消す
<set>タグに「showName='0'」を付ける

・バーにカーソルを乗せたときのホバーテキストを設定する
<set>タグに「hoverText='hogehoge'」を付ける

・バーに透過度をつける
<set>タグに「alpha='0-100の数値'」を付ける

ドキュメントでは、Index.htmlを開き左メニューの「Advanced Charting」を選べばカスタマイズ方法のページを見ることができます。

■日本語表示は？

データXMLの中身を日本語に書き換えただけでは日本語表示してくれません。
日本語を表示するためには、renderChart()、rendarChartHTML()の第2引数$strURLでXMLファイルを指定するのではなく、第3引数の$strXMLを使用しなければいけないようです。


<?php
include("Code/PHP/Includes/FusionCharts.php");
?>
<HTML>
   <HEAD>
      <TITLE>日本語表示</TITLE> 
      <SCRIPT LANGUAGE="Javascript" SRC="JSClass/FusionCharts.js"></SCRIPT>
   </HEAD>
   <BODY>
   <?php
$strXML = <<<STR
<graph caption='日本語を使用したグラフ' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'>
    <set name='１月' value='462' color='AFD8F8' />
    <set name='２月' value='857' color='F6BD0F' />
    <set name='３月' value='671' color='8BBA00' />
    <set name='４月' value='494' color='FF8E46' />
    <set name='５月' value='761' color='008E8E' />
    <set name='６月' value='960' color='D64646' />
    <set name='７月' value='629' color='8E468E' />
    <set name='８月' value='622' color='588526' />
    <set name='９月' value='376' color='B3AA00' />
    <set name='１０月' value='494' color='008ED6' />
    <set name='１１月' value='761' color='9D080D' />
    <set name='１２月' value='960' color='A186BE' />
</graph>
STR;
// $strXML = file_get_contents('Data/Data.xml'); でもいけますよ
      echo renderChart("Charts/FCF_Column3D.swf", "", $strXML, "myFirst", 600, 300, false, false);
   ?>
   </BODY>
</HTML>

ということは日本語を使う場合は必ずスクリプトを通す必要があるのかな・・・？

ちなみにマルチバイト言語を使うと、X軸のラベル文字を回転させたりすることは出来ないようです。

■最後に

ウチでもグラフ関連製品のJpGraphやJSChartを出してるのでそっちもヨロシクネ！

-----------------------------------------------------------------
2007/10/24　追記
はてぶコメントにてPHPタグが閉じてないぽとご指摘いただいたので修正しました。
2箇所ほど</BODY>タグ直前の?>が抜けていたようです。
ありがとうございました。