なぜかFlex3

Flexのチャートを使ってみた。
それからもうひとつの課題として動的にコントロールを配置してみたい、っていうのがあったので、途中からAS側でチャートを作るように変えてみた。

○ここまでやった感想
型宣言はあるけど、書いてる感覚はJavaScriptとそんなに変わらない気がする。
コントロールがhtmより豊富とはいえ、僕が仕事でも使いそうな範囲でいえばHTML+CSS+Javascriptで十分かもしれない。
が、チャートは別。Flexなら簡単に出せるけど、これをブラウザの範囲でやるので辛い。
Flexだとベンダ依存になるのはいやだけど、いまさらそれを言ってもなぁ。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script source="HelloWorld.as" />
  <mx:Button 
     id="btn" 
     label="execute"
     rollOver="doZoom(event)"
     rollOut="doZoom(event)" />
  
<!--  <mx:PopUpButton id="pop" label="チャートの選択" creationComplete="initMenu();" width="135" /> -->
  <mx:Zoom id="zoomAll" zoomWidthTo="2" zoomHeightTo="2" zoomWidthFrom="1" zoomHeightFrom="1"  />
  <mx:Panel id="pan" title="sample chart" width="100%" height="100%">
<!--    <mx:LineChart id="chart" width="100%" height="100%" >
      <mx:horizontalAxis>
    <mx:CategoryAxis categoryField="month"/>
      </mx:horizontalAxis>
      <mx:series>
        <mx:Array>
            <mx:LineSeries yField="data1" form="curve" />
            <mx:LineSeries yField="data2" form="curve" />
        </mx:Array>
    </mx:series>
    </mx:LineChart> -->
   </mx:Panel>

</mx:Application>

<flex-config>
  <output>bin/HelloWorld.swf</output>
  <default-size>
    <width>400</width>
    <height>300</height>
  </default-size>
  <default-frame-rate>60</default-frame-rate>
  <default-background-color>0x000000</default-background-color>
</flex-config>

import mx.controls.Alert;
import flash.events.MouseEvent;
import mx.events.*;
import mx.charts.series.*;
import mx.charts.*;

public var zingerManufacturingData:Array = [
    {month: "一月",data1:3,data2: 1},
    {month: "二月",data1:5,data2: 9},
    {month: "三月",data1:3,data2: 4},
    {month: "四月",data1:4,data2: 8},
    {month: "五月",data1:7,data2: 5},
    {month: "六月",data1:7,data2: 5},
    {month: "七月",data1:4,data2: 3},
    {month: "八月",data1:3,data2: 7},
    {month: "九月",data1:5,data2: 2},
    {month: "十月",data1:6,data2: 4},
    {month: "十一月",data1:4,data2: 2},
    {month: "十二月",data1:8,data2: 8}
]

// private function initMenu():void {;;;;
//     myMenu = new Menu();
//     var dp:Object = [{label:"グラフ"}, {label:"ライン"}];        
//     myMenu.dataProvider = dp;
//     myMenu.selectedIndex = 0;       
//     myMenu.addEventListener("itemClick", itemClickHandler);
//     pop.popUp = myMenu;
//     pop.label = myMenu.dataProvider[myMenu.selectedIndex].label;
// }

// private function itemClickHandler(event:MenuEvent):void {
//     var label:String = event.item.label;        
//     popTypeB.text=String(label + "に移動しました");
//     popB.label = "配置 :" + label;
//     popB.close();
//     myMenu.selectedIndex = event.index;
// }

public var showMessage:Function = function(name:String):void
{
    pan.removeAllChildren();
    var chart:LineChart = new LineChart();
    chart.id="chart";
    chart.percentWidth = 100;
    chart.percentHeight = 100;
    var renderer:CategoryAxis = new CategoryAxis();
    renderer.categoryField="month";
    chart.horizontalAxis = renderer;
    var array:Array = new Array();
    var ls:LineSeries=new LineSeries();
    ls.yField="data1";
    ls.setStyle("form","curve");
    array.push(ls);
    chart.series = array;
    pan.addChild(chart);
    chart.dataProvider = zingerManufacturingData;
}

public function doZoom(event:MouseEvent):void {
    if (zoomAll.isPlaying) {
        zoomAll.reverse();
    }
    else {
        zoomAll.play([event.target], event.type == MouseEvent.ROLL_OUT ? true : false);
    }
}