效果图:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" applicationComplete="click()">
<fx:Script>
<![CDATA[
import mx.charts.events.ChartItemEvent;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
[Bindable]
public var planvalue:ArrayCollection=new ArrayCollection([
{time:"1",realvalue:2000,planvalue:1500,guessvalue:1000,realrate:20,planrate:10},
{time:"2",realvalue:1000,planvalue:200,guessvalue:1000,realrate:40,planrate:50},
{time:"3",realvalue:1500,planvalue:500,guessvalue:1000,realrate:20,planrate:80}
]);
public function initListener():void
{
chart.addEventListener(ChartItemEvent.ITEM_CLICK,handler);
// chart.addEventListener(ChartItemEvent.ITEM_DOUBLE_CLICK,handler);
// chart.addEventListener(ChartItemEvent.ITEM_MOUSE_DOWN,handler);
// chart.addEventListener(ChartItemEvent.ITEM_MOUSE_MOVE,handler);
// chart.addEventListener(ChartItemEvent.ITEM_MOUSE_UP,handler);
// chart.addEventListener(ChartItemEvent.ITEM_ROLL_OUT,handler);
// chart.addEventListener(ChartItemEvent.ITEM_ROLL_OVER,handler);
}
public function handler(event:ChartItemEvent):void
{
mx.controls.Alert.show(event.type);
}
public function click():void
{
chart.dataProvider=planvalue;
chart1.dataProvider=data.element;
chart1.secondDataProvider=data.element;
}
]]>
</fx:Script>
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
<fx:Model id="data" source=".../flex_src/demoDat.xml"></fx:Model>
<mx:SeriesInterpolate id="interpolate" elementOffset="-10" minimumElementDuration="200" duration="2500"></mx:SeriesInterpolate>
<mx:SeriesZoom id="zoom" horizontalFocus="center" relativeTo="chart" verticalFocus="center" elementOffset="30" minimumElementDuration="200" duration="2500"></mx:SeriesZoom>
<mx:SeriesSlide id="slide" direction="left" elementOffset="30" minimumElementDuration="100" duration="2500"></mx:SeriesSlide>
</fx:Declarations>
<s:Panel x="11" y="80" width="408" height="311" title="数据源:ArrayCollection">
<mx:ColumnChart x="10" y="10" id="chart" width="386" height="258" creationComplete="initListener()">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="time" title="planvalue"></mx:CategoryAxis>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis title="realvalue" maximum="2500" minimum="0"></mx:LinearAxis>
</mx:verticalAxis>
<mx:series>
<mx:ColumnSeries displayName="realvalue" yField="realvalue" xField="time" showDataEffect="{interpolate}"/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{chart}"/>
</s:Panel>
<s:Panel x="427" y="79" width="575" height="505" title="数据源:外部xml">
<mx:ColumnChart x="10" y="10" id="chart1" width="553" height="452" showDataTips="true">
<mx:series>
<mx:ColumnSeries yField="realvalue" showDataEffect="{interpolate}"/>
<mx:LineSeries yField="planvalue" showDataEffect="{zoom}"/>
</mx:series>
<mx:secondSeries>
<mx:LineSeries xField="time" yField="realrate" form="curve" showDataEffect="{slide}"></mx:LineSeries>
</mx:secondSeries>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="time"/>
</mx:horizontalAxis>
</mx:ColumnChart>
<mx:Legend dataProvider="{chart1}"/>
</s:Panel>
<mx:ApplicationControlBar>
<mx:Button label="Show Effects" click="click()"></mx:Button>
</mx:ApplicationControlBar>
</s:Application>
其中外部数据xml位于:
且数据格式为:
<?xml version="1.0" encoding="UTF-8"?>
<root>
<element>
<time>1月</time>
<realvalue>1258.91</realvalue>
<planvalue>1117.27</planvalue>
<guessvalue>1327.55</guessvalue>
<realrate>8</realrate>
<planrate>9</planrate>
</element>
<element>
<time>2月</time>
<realvalue>1238.91</realvalue>
<planvalue>1317.27</planvalue>
<guessvalue>1327.55</guessvalue>
<realrate>11</realrate>
<planrate>10</planrate>
</element>
<element>
<time>3月</time>
<realvalue>1278.91</realvalue>
<planvalue>1217.27</planvalue>
<guessvalue>1327.55</guessvalue>
<realrate>9</realrate>
<planrate>8</planrate>
</element>
<element>
<time>4月</time>
<realvalue>1248.91</realvalue>
<planvalue>1317.27</planvalue>
<guessvalue>1327.55</guessvalue>
<realrate>7</realrate>
<planrate>6</planrate>
</element>
<element>
<time>5月</time>
<realvalue>1228.91</realvalue>
<planvalue>1417.27</planvalue>
<guessvalue>1327.55</guessvalue>
<realrate>6</realrate>
<planrate>7</planrate>
</element>
<element>
<time>6月</time>
<realvalue>1218.91</realvalue>
<planvalue>1217.27</planvalue>
<guessvalue>1327.55</guessvalue>
<realrate>8</realrate>
<planrate>10</planrate>
</element>
<element>
<time>7月</time>
<realvalue>1208.91</realvalue>
<planvalue>1117.27</planvalue>
<guessvalue>1327.55</guessvalue>
<realrate>11</realrate>
<planrate>5</planrate>
</element>
<element>
<time>8月</time>
<realvalue>1188.91</realvalue>
<planvalue>1317.27</planvalue>
<guessvalue>1327.55</guessvalue>
<realrate>9</realrate>
<planrate>10</planrate>
</element>
<element>
<time>9月</time>
<realvalue>1088.91</realvalue>
<planvalue>1317.27</planvalue>
<guessvalue>1327.55</guessvalue>
<realrate>11</realrate>
<planrate>10</planrate>
</element>
<element>
<time>10月</time>
<realvalue>1388.91</realvalue>
<planvalue>1317.27</planvalue>
<guessvalue>1327.55</guessvalue>
<realrate>9</realrate>
<planrate>10</planrate>
</element>
<element>
<time>11月</time>
<realvalue>1488.91</realvalue>
<planvalue>1117.27</planvalue>
<guessvalue>1327.55</guessvalue>
<realrate>11</realrate>
<planrate>9</planrate>
</element>
<element>
<time>12月</time>
<realvalue>1088.91</realvalue>
<planvalue>1317.27</planvalue>
<guessvalue>1327.55</guessvalue>
<realrate>8</realrate>
<planrate>10</planrate>
</element>
</root>