Flex PlotChart的学习

    工作需要，用flex做报表，第一次接触报表，现将学习到的小知识点记载。

    FusionCharts是一个已经开发很成熟的报表系统，可以制作出很多种类报表，而且界面相当漂亮，动画效果也不错。不过，部分功能是收费的，也有破解版，可以网上搜索下载。目前我使用的是V3.1，增加了不少东西。在js中直接传入xml数据调用即可，如果运用在flex中，需要源码支持。

    我的工作需要做散点图，FusionCharts的散点图实例没有找到怎么用。所以用的flex的自带PlotChart，官方例子以及网上很多例子讲解了基本的用法。在使用过程中部分需求查不到，特记录一下。

 

 

<mx:PlotChart id="plot"
        width="100%"
        height="100%"
        paddingLeft="5"
        paddingRight="5"
        color="0x323232"
        showDataTips="true"
        dataProvider="{allDataAC}"
        itemClick="getDataInfo(event)">
    <mx:verticalAxis>
     <mx:CategoryAxis categoryField="Productivity"
          displayName="Productivity"
          dataProvider="{yDataAC}"
          title="Productivity"/>
    </mx:verticalAxis>
    <mx:horizontalAxis>
     <mx:CategoryAxis categoryField="Score"
          displayName="Score"
          dataProvider="{xDataAC}"
          title="Score"/>
    </mx:horizontalAxis>
    <mx:series>
     <mx:PlotSeries xField="Score"
           yField="Productivity"
           buttonMode="true"
           useHandCursor="true"
           id="plotSeries"
           fill="{sc}">
           </mx:PlotSeries>
    </mx:series>
   </mx:PlotChart>

 

 

其中，

1、<mx:verticalAxis><mx:horizontalAxis>用来设置xy坐标，title是坐标说明。

2、点击某个散点触发函数，itemClick监听可实现。不过在监听函数中获取当前散点的数据有点特殊用法，如下

    private function getDataInfo(e:ChartItemEvent):void
   {
       var itemIndex:Number=e.hitData.chartItem.index;
       var obj:Object=allDataAC.getItemAt(itemIndex);
    

       。。。。。。一下自己业务的处理
   }

先获取itemIndex，根据该索引去数据集中查找。暂时没有找到其他办法。

3、mx:CategoryAxis如果不去设置dataprovider，数据的显示顺序是按照元数据集显示的，如果我们需要坐标轴按照显示字段的顺序进行排列，我没有找到很简单的办法，重新封装了数据，按照坐标轴显示字段的顺序，封装了x轴和y轴需要的特殊数据。