新手问题—关于FLEX曲线上数据点显示

最新推荐文章于 2025-11-08 17:58:58 发布

原创最新推荐文章于 2025-11-08 17:58:58 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flex #Adobe #XML

本文介绍了一个使用Adobe Flex创建的交互式统计图表应用案例。该应用通过LineChart组件展示了一组模拟的数据，并实现了数据点提示的动态显示与隐藏功能。此外，还包括了鼠标事件处理和按钮操作来控制图表的行为。

废话少说上代码！主要是红色部分，让数据点一直显示。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script><![CDATA[
        import mx.collections.ArrayCollection;
        import mx.charts.events.ChartEvent;
        import mx.controls.Alert;
        [Bindable]
        public var clickData:ArrayCollection = new ArrayCollection([
            {Date:"2月2日", Profit:33456567, Duration:23423234},
            {Date:"2月3日", Profit:50892344, Duration:12313453},
            {Date:"2月4日", Profit:23034586, Duration:56232343},
            {Date:"2月5日", Profit:12439623, Duration:78345451},
            {Date:"2月6日", Profit:40285234, Duration:1235123},
            {Date:"2月7日", Profit:60345642, Duration:23544536}
        ]);
        public function showAllTips():void {
            linechart1.showAllDataTips = !linechart1.showAllDataTips;
        };
        public function chartEventHandler(event:ChartEvent):void{
            myValue.text = [event.currentTarget,event.localX.toString(),event.localY.toString()].join("/");
        };
        public function lineEventHandler(event:MouseEvent):void{
            var ls:LineSeries=event.target as LineSeries;
                  }

    ]]></mx:Script>

    <mx:Style>
    .axisTitles {
       color:red;
       fontWeight:bold;
       fontFamily:宋体;
       fontSize:14;
    }
    LineChart {
       axisTitleStyleName:axisTitles;
    }
    </mx:Style>


    <mx:Panel layout="absolute" title="统计图表" top="10" left="10" right="10" bottom="40">
        <mx:LineChart id="linechart1" top="0" left="0" right="0" bottom="0" dataProvider="{clickData}" showDataTips="true" themeColor="#E314D7" itemSelectionColor="#FF0000" itemRollOverColor="#0600FF" fontFamily="宋体" fontAntiAliasType="advanced" chartClick="chartEventHandler(event)">
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Date" title="时间"/>
            </mx:horizontalAxis>
            <mx:series>
                <mx:LineSeries displayName="点击率" itemRenderer="mx.charts.renderers.CircleItemRenderer" yField="Profit" form="curve" click="lineEventHandler(event)"/>
            </mx:series>
        </mx:LineChart>
        <mx:Legend dataProvider="{linechart1}" right="10" top="10"/>
    </mx:Panel>
    <mx:Button label="切换所有采集点提示" width="139" click="{showAllTips()}" bottom="10" left="10"/>
    <mx:TextInput id="myValue" bottom="10" left="157" width="334"/>

</mx:Application>