ASTRAを使ってグラフを描いてみる

YahooのUIコンポーネントライブラリ「ASTRA」を使って棒グラフを描いてみます。

ダウンロード

Flex SDKでASTRAを使うために必要なモノは次の2つです。

• ASTRA
  • ASTRAのサイトからダウンロードします。
• Flash CS3のコアクラス(fl.core.UIComponentなど)のソースまたはswc
  • ASTRAがこれらに依存しているため必要。
  • 今回はここで配布されていたFl_cpackage.swcを利用して試してみました。
  • ※注:ライセンス的に問題ないかはちょっと微妙です。コアライブラリもswcと共に再配布可能であれば問題ないような気がしますが・・。

プロジェクトへの組み込み

ASTRAはswc形式では配布されていないので、ソースコードごとプロジェクトに取り込みます。

<root>
├com ←ASTRAのソースコードディレクトリ
│ └yahoo
│    └astra
│       └...
└ChartSample.as ← メインのasファイル

Fl_cpackage.swcはflex SDKの「/frameworks/libs/」以下にコピーします。

グラフを描く

メインプログラムのChartSample.asは次の通り。ASTRAサンプルコードとほぼ同じです。

package {

    import flash.display.*;
    import com.yahoo.astra.fl.charts.*;
    import com.yahoo.astra.fl.charts.series.*;

	/**
	 * メインクラス
	 */
	public class ChartSample extends Sprite  {

        /**
         * コンストラクタ
         */
        public function ChartSample(){

            // チャートのインスタンスを作成
            var chart:ColumnChart = new ColumnChart();
            chart.x = 10;
            chart.y = 10;
            chart.width = 400;
            chart.height = 300;

            // 子要素として追加
            this.addChild( chart );

            // データ設定
            var data:ColumnSeries = new ColumnSeries([ 5, 12, 20, 3, 15 ]);
            chart.dataProvider = data;
        }
    }
}

コンパイルします。

mxmlc ChartSample.as

実行結果です。