LineChart series click 事件
代码如下:
<?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">
<fx:Script>
<![CDATA[
import mx.charts.HitData;
import mx.charts.events.ChartItemEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
[Bindable]
private var expensesAC:ArrayCollection = new ArrayCollection( [
{ Month: "1", Profit: 1, Expenses: 6, Amount: 3 },
{ Month: "11", Profit: 2, Expenses: 5, Amount: 4 },
{ Month: "111", Profit: 10, Expenses: 10, Amount: 5 },
{ Month: "1111", Profit: 4, Expenses: 3, Amount: 6 },
{ Month: "1111", Profit: 5, Expenses: 2, Amount: 7 } ]);
protected function clickHandler(event:ChartItemEvent):void
{
//获取linechart的id
var linename:Object = event.currentTarget;
var hd:HitData = event.hitData;
//获取点击点的index
var index:Number = hd.chartItem.index;
//获取lineseries的信息
if (hd.chartItem.element is LineSeries)
{
var displayName:String = LineSeries(hd.chartItem.element).displayName;
if(displayName == "Profit"){
trace(displayName+':'+ linename.dataProvider[index].Profit);
}
if(displayName == "Expenses"){
trace(displayName+':'+ linename.dataProvider[index].Expenses);
}
if(displayName == "Amount"){
trace(displayName+':'+ linename.dataProvider[index].Amount);
}
}
/*if (hd.chartItem.element is AreaSeries)
{
var displayName:String = AreaSeries(hd.chartItem.element).displayName;
}*/
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Define custom Strokes. -->
<s:SolidColorStroke id = "s1" color="blue" weight="1"/>
<s:SolidColorStroke id = "s2" color="red" weight="1"/>
<s:SolidColorStroke id = "s3" color="green" weight="1"/>
</fx:Declarations>
<mx:Panel title="曲线"
height="100%" width="100%" layout="horizontal">
<mx:LineChart id="linechart1" height="30%" width="30%"
paddingLeft="5" paddingRight="5"
showDataTips="true" dataProvider="{expensesAC}" itemClick="clickHandler(event)">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month"/>
</mx:horizontalAxis>
<mx:series><!--curve:曲线 segment:折线 horizontal:水平线 step: reverseStep:-->
<mx:LineSeries yField="Profit" form="horizontal" displayName="Profit" lineStroke="{s1}"/>
<mx:LineSeries yField="Expenses" form="segment" displayName="Expenses" lineStroke="{s2}"/>
<mx:LineSeries yField="Amount" form="curve" displayName="Amount" lineStroke="{s3}"/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{linechart1}"/><!--图表元素-->
</mx:Panel>
</s:Application>
界面效果:
Flex Builder dubgger: