flex实现图表事件获取数据

最新推荐文章于 2025-08-18 16:08:43 发布

最新推荐文章于 2025-08-18 16:08:43 发布 · 113 阅读

文章标签：

#Flex #UP

Flex 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用 Flex 的 CandlestickChart 实现鼠标悬停时显示开盘价和收盘价的具体方法。通过设置 itemMouseMove 事件，实现图表交互效果，并详细展示了所需导入的包及代码配置。

首先必须引入几个包

import mx.charts.events.ChartItemEvent;
import mx.charts.series.items.ColumnSeriesItem;

private function setMousedata(event:ChartItemEvent):void
    {
     var can:HLOCSeriesItem=event.hitData.chartItem as HLOCSeriesItem; //不同的图表创建相应的对象
     showdataLabel.text=can.item.open+"   "+can.item.close;
    }

然后在图表中加入一个itemMouseMove事件

   <mx:Label id="showdataLabel" /></mx:Box>
     
        <mx:CandlestickChart id="candlestickchart"   
            height="100%"     itemMouseMove="setMousedata(event)"
            width="100%"
            paddingRight="5" 
            paddingLeft="5" 
             
           mouseMove="dropHandler(event)"
            dataProvider="{TICKER}"
        >            
            <mx:verticalAxis>
                <mx:LinearAxis id="vaxis" baseAtZero="false" title="Price"/>
            </mx:verticalAxis>

            <mx:horizontalAxis>
                <mx:CategoryAxis id="haxis" categoryField="Date" title="Date"/>
            </mx:horizontalAxis>

            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer axis="{haxis}" canDropLabels="true"/>
            </mx:horizontalAxisRenderers>

            <mx:series>
                <mx:CandlestickSeries 
                    openField="open" 
                    highField="high" 
                    lowField="low" 
                    closeField="close"
                    fill="{up}"
                    declineFill="{down}"
                    stroke="{wick}"
                    boxStroke="{box}"
                />
            </mx:series>
        </mx:CandlestickChart>