Flash で グラフを書く

以前、案件で使ったライブラリについて書いておく。
Open Flash Chart 2 といって、Flash で書いたグラフをページ内に埋めこめるツール。
シンプルだけど高機能で、色んな種類のグラフが書ける。

単純なグラフはもちろん

This movie requires Flash Player 9.0.0

棒グラフ(ガラス的装飾付き)とか・・・

This movie requires Flash Player 9.0.0

円グラフ

This movie requires Flash Player 9.0.0

こういうのはローソクチャートって言うんだっけ

This movie requires Flash Player 9.0.0

公式サイトにはこの他にも     なサンプルがあるみたい。

使い方は続きで

使うのは簡単で、配布物の中から

  • js/swfobject.js
  • open-flash-chart.swf

を抜き出して、HTMLの中から以下のように呼び出すだけ。

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
  "open-flash-chart.swf", "my_chart",
  "550", "400", "9.0.0", "expressInstall.swf",
  {"data-file":"some_datafile.json"} );
</script>

与える JSON ファイルは、例えば上の装飾付き棒グラフの場合、以下のようになる

{
    "elements": [
        {
            "type": "bar_glass",
            "values": [
                9,
                8,
                7,
                6,
                {
                    "top": 5,
                    "colour": "#ff0000",
                    "tip": "Hello<BR>#val#"
                },
                4,
                3,
                2,
                1
            ]
        }
    ],
    "title": {
        "text": "Fri Feb 05 2010"
    }
}
preload preload preload