Flex LineChart series click事件

最新推荐文章于 2024-11-13 15:19:03 发布

九宝妈咪

最新推荐文章于 2024-11-13 15:19:03 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Flex

本文链接：https://blog.youkuaiyun.com/elisunli/article/details/40211409

Flex 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用Flex框架实现的LineChart组件案例，通过点击事件获取所选数据点的具体信息。该示例展示了如何定义LineChart的数据源、设置不同类型的线条样式，并通过事件监听器来响应用户的点击行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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: