No.2351 OpenFlashChartを使ってみました
Open Flash Chartを使ってみました
Webサイトでグラフを作成表示するためのライブラリの一つにOpen Flash Chartというものがあります。これはJSON形式のデータをSWFファイルに渡すことによりグラフを生成表示することができます。
まずは早速何かグラフを表示してみましょう。Open Flash Chartはこちらからダウンロードすることができます。
http://www.teethgrinder.co.uk/open-flash-chart-2/
ダウンロードしたファイルを解凍するといろんなファイルが出てきますが最低限必要なのはopen-flash-chart.swfです。このswfを埋め込んでJSON形式のデータをパラメータとして渡します。
chart.html
- <div
id="chart"></div> - <script
type="text/javascript"> - //<![CDATA[
- swfobject.embedSWF("open-flash-chart.swf",
"chart", "640", "480", "9.0.0", "expressInstall.swf", {"data-file":"data.json"}); - //]]>
- </script>
データとなるJSONは以下のようにしてみました。
data.json
- {
"title": { "text":"棒グラフ" }, "elements":[ { "type":"bar_filled", "colour":"#3373CC", "outline-colour":"#3373AC", "values":[8,8,1,7,4,8,1,10,7,1,8,5,9,4] } ], "x_axis": { "labels": { "labels":["7:00","8:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","0:00"] }, "colour":"#898989", "grid-colour":"#EEEEEE" }, "y_axis": { "colour":"#898989", "grid-colour":"#EEEEEE" }, "bg_colour":"#FFFFFF" - }
こんな感じでchart.htmlを表示すると棒グラフが表示されます。
ちなみに、Open Flash Chartはソースコードが公開されています。なので、ActionScript3が分かるのであれば自由にいじくりまわせます。先ほど解凍した中の open-flash-chartディレクトリにソースコードがあります。WindowsユーザであればFlex3 SDKとFlashDeveloperを用いてコンパイルすることができます。で、私もそうですがMacの場合は。。。FlashDeveloperがな いのでFlex3 SDKをインストールしてターミナルでコンパイルしてみましょう。
- $
cd open-flash-chart - $
mxmlc main.as
おそらくエラーが出てくると思います。FlashDeveloperのクラスライブラリというかFlashConnectを使用しているらしく、それがないというエラーメッセージです。なので、
http://code.google.com/p/flashdevelop/source/browse/branches/FD3.1/FlashDevelop/Bin/Debug/Library/AS3/classes/org/flashdevelop/utils/?r=257こちらからFlashConnect.asとTraceLevel.asを持ってきて
- $
mkdir -p org/flashdevelop/utils
で、ディレクトリを作成しそこに設置してコンパイルします。これで無事swfが生成されていると思います。
そんなことで、JSON形式のデータを渡すだけで簡単に綺麗なグラフを生成することができるOpen Flash Chart、使ってみてはいかがでしょうか。