エアコンはいつまで我慢できるかな・・・
Flexにある「Flex Ajax Bridge」という仕組みをを使って、FlexとJavaScriptの連携をやってみました。
これによってFlex上の関数をJavaScript上から呼び出せるようになります。
今回は"Flexの棒グラフに対してHTMLのボタンを押すことでグラフのデータを変更する"ということをやってみました。
Flexではいろいろなチャートが用意されているので、HTML上でグラフが必要なときは、これを使うほうが楽できそう。
iPhoneとかiPadでは動かないけどねｗ。
Flexのコード
棒グラフのチャート部分は次のように作成しました。Flex Ajax Bridgeを使う場合は、「<fab:FABridge xmlns:fab="bridge.*" />」が必要らしいです。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<fab:FABridge xmlns:fab="bridge.*" />
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dataList:ArrayCollection = new ArrayCollection();
public function setDataList(i_dataList:Array):void {
dataList = new ArrayCollection(i_dataList);
}
]]>
</mx:Script>
<mx:SeriesSlide
id="slideIn"
duration="1500"
direction="up"
/>
<mx:Panel width="350" height="400">
<mx:ColumnChart id="dataChart" dataProvider="{dataList}" width="100%" height="100%">
<!-- 横軸の定義 -->
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{dataList}" categoryField="x"></mx:CategoryAxis>
</mx:horizontalAxis>
<!-- 縦軸の定義 -->
<mx:verticalAxis>
<mx:LinearAxis minimum="0" maximum="1000"></mx:LinearAxis>
</mx:verticalAxis>
<!-- データの定義 -->
<mx:series>
<mx:ColumnSeries yField="y" displayName="Data" showDataEffect="slideIn"></mx:ColumnSeries>
</mx:series>
</mx:ColumnChart>
<!-- 凡例の定義 -->
<mx:Legend dataProvider="{dataChart}" />
</mx:Panel>
</mx:Application>
HTMLのコード
HTMLのソースコードは下記の通りです。Flexにアクセスするためには「var flexApp = FABridge.flash.root();」でFlashアプリケーションの参照を取得し、
そこから定義されている関数や要素にアクセスするという流れになります。
Flexをインストールすると"FABridge.js"というファイルがあるはずなので、それをコピーして必要な場所に配置する必要があります。
<!DOCTYPE html> <html> <head> <title>Flex Ajax Bridge Sample</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="bridge/FABridge.js"></script> <script> <!-- function onClickHandler() { changeData(); } function init() { changeData(); } function changeData() { var flexApp = FABridge.flash.root(); flexApp.setDataList([ { x: 0, y: Math.random() * 1000}, { x: 10, y: Math.random() * 1000 }, { x: 20, y: Math.random() * 1000 }, { x: 30, y: Math.random() * 1000 }, { x: 40, y: Math.random() * 1000 } ]); } // --> </script> </head> <body onload="init()"> <embed name="" src="chart.swf" width="500" height="500" /> <button onclick="onClickHandler()">push</button> </body> </html>
0 コメント:
コメントを投稿