`

Flex中用鼠标拖动LineChart图表的折线

    博客分类:
  • Flex
阅读更多
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">   
<mx:Script>   
<!--[CDATA[   
  
    import mx.charts.series.LineSeries;   
    import mx.collections.ArrayCollection;   
    import mx.controls.Alert;   
    import mx.events.MoveEvent;   
       
    private var expensesAC:ArrayCollection = new ArrayCollection( [//全部数据   
        { Month: "Jan", Profit: 2000 },   
        { Month: "Feb", Profit: 1000 },   
        { Month: "Mar", Profit: 1500 },   
        { Month: "Apr", Profit: 1800 },   
        { Month: "May", Profit: 2400 },   
        { Month: "六月", Profit: 2000 },   
        { Month: "七月", Profit: 1000 },   
        { Month: "八月", Profit: 1500 },   
        { Month: "九月", Profit: 1800 },   
        { Month: "十月", Profit: 2400 }   
        ]);   
    [Bindable]   
    private var showData:ArrayCollection = new ArrayCollection();//定义要显示的临时数据   
    private var firstIndex:int, lastIndex:int;   
    private function init():void  
    {   
        for(var i:int=0; i<5; i++)   
            showData.addItem(expensesAC[i]);   
        firstIndex = 0;   
        lastIndex = 4;   
    }   
       
    private var oldX:Number,oldY:Number;   
       
    private  function onMouseMove(event:MouseEvent):void  
    {   
       if(event.buttonDown)   
       {   
            var addx:Number = 0;   
            addx = event.stageX - oldX;//变化的x坐标   
            if(addx >= 15)   
            {      
                if(lastIndex < expensesAC.length-1)   
                {   
                    showData.removeItemAt(0);//删除临时数据的头一个数据点   
                    showData.addItem(expensesAC[lastIndex+1]);//增加一个新的数据点   
                    firstIndex ++ ;   
                    lastIndex ++ ;   
                    addx = 0;   
                    oldX = event.stageX;   
                }   
                else  
                {   
                    Alert.show("已是最后一个数据点!");   
                }   
            }   
            if(addx <= -15)   
            {   
                if(firstIndex > 0)   
                {   
                    showData.removeItemAt(4);//删除临时数据的头一个数据点   
                    showData.addItemAt(expensesAC[firstIndex-1],0)//增加一个新的数据点   
                    firstIndex -- ;   
                    lastIndex -- ;   
                    addx = 0;   
                    oldX = event.stageX;   
                }   
                else  
                {   
                    Alert.show("已是第一个数据点!");   
                }   
            }                                      
       }   
    }   
    private  function onMouseDown(event:MouseEvent):void  
    {   
        oldX = event.stageX;//按下鼠标时的x坐标        
    }   
       
    private function moveLeft():void  
    {   
        if(firstIndex >0 )   
        {   
            showData.removeItemAt(4);//删除临时数据的头一个数据点   
            showData.addItemAt(expensesAC[firstIndex-1],0)//增加一个新的数据点   
            firstIndex -- ;   
            lastIndex -- ;     
        }      
        else    
        {   
            Alert.show("已是第一个数据点!");   
        }   
    }   
    private function moveRight():void  
    {   
        if(lastIndex < expensesAC.length-1  )   
        {   
            showData.removeItemAt(0);//删除临时数据的头一个数据点   
            showData.addItem(expensesAC[lastIndex+1]);//增加一个新的数据点   
            firstIndex ++ ;   
            lastIndex ++ ;   
        }   
        else  
        {   
            Alert.show("已是最后一个数据点!");   
        }   
    }   
    ]]-->   
</mx:Script>   
<mx:Panel title="LineChart and AreaChart Controls Example" height="100%" width="100%"  layout="vertical">   
    <mx:LineChart id="linechart" height="100%" width="100%" paddingLeft="5" paddingRight="5"  showDataTips="true" dataProvider="{showData}" mouseMove="onMouseMove(event)" mouseDown="onMouseDown(event)">   
        <mx:horizontalAxis>   
            <mx:CategoryAxis categoryField="Month"/>   
        </mx:horizontalAxis>   
        <mx:series>   
            <mx:LineSeries  id="profitSeries" yField="Profit"  displayName="Profit" itemRenderer = "mx.charts.renderers.CircleItemRenderer" />   
        </mx:series>   
    </mx:LineChart>   
    <mx:Canvas width="100%">   
        <mx:Legend dataProvider="{linechart}" x="0" height="33" y="10"/>   
        <mx:Button label="左移" x="569" y="11" click="moveLeft()"/>   
        <mx:Button label="右移" x="660" y="11" click="moveRight()"/>   
    </mx:Canvas>   
</mx:Panel>   
</mx:Application>

 

分享到:
评论
1 楼 guomi_java 2010-01-12  
朋友请教一个问题,Flex 线型图两端的点不能完全显示.有种被切的感觉.这个问题解决过嘛?帮一下忙,谢谢

相关推荐

    flex 改变linechart datatips 显示样式代码

    在Flex开发中,LineChart是一种常用的图表组件,用于展示数据趋势。Datatips是LineChart中的一个重要特性,它会在鼠标悬停在数据点上时显示相关信息。本篇将详细介绍如何改变Flex LineChart的Datatips显示样式,包括...

    Flex 饼形图 piechart 柱形图 columnchart 条形图 barchart 折线图 linechart

    在Flex中,饼形图(piechart)、柱形图(columnchart)、条形图(barchart)和折线图(linechart)是数据可视化的重要工具,它们广泛应用于数据分析、报表展示以及业务指标的可视化。 **饼形图(Pie Chart)** 饼形...

    Flex BlazeDs 推数据生成lineChart实例

    综上所述,"Flex BlazeDs 推数据生成lineChart实例"是一个整合了Flex前端、BlazeDS数据推送服务和实时图表展示的综合应用,它展示了如何利用这些技术实现高效的实时数据监控。通过理解并掌握这个实例,开发者可以在...

    flex LineChart

    以下是我最近做flex组件编程时的总结,是主要针对lineChart的用法,其中某些属性对同是有横纵坐标的columnChart、barChart等都有效,比如对背景的网格线、横纵坐标线条的粗细颜色和标签的设置都有效。

    flex 移动折线图

    LineChart是Flex中用于绘制折线图的标准组件,它继承自Chart类,可以展示各种数值型数据。LineChart提供了丰富的样式和配置选项,包括颜色、线宽、标记点等,使开发者能够定制出满足需求的可视化效果。 二、Line...

    flex_linechart

    flex项目开发过程中的动态linechart,主要是曲线可以增量的刷新,纵坐标、刷新频率可以调整,也可以稍微改下根据配置进行曲线设置,这个是少了获取数据的方法用随机数代替,项目中用到动态linechart的可以参考。

    flex LineChart实例

    根据提供的文件信息,我们可以从标题、描述以及部分代码中提炼出与Flex LineChart相关的知识点。 ### Flex LineChart实例 #### 标题理解 标题“Flex LineChart实例”明确指出这是一个关于Flex框架下的线形图(Line...

    Flex LineChart

    Flex Chart Sytles 简单示例 基本样式使用,网上搜到的收藏下。

    Flex Chart 图表3D展示

    Flex Chart 是Adobe Flex框架中的一种组件,用于创建各种数据可视化图表。在本示例中,我们关注的是"Flex Chart的3D展示",这表明它利用了Flex AS(ActionScript)语言来实现一种引人注目的3D效果。ActionScript是...

    flex鼠标拖动

    这是一个PPT,有关于做Flex的鼠标拖动,值得一看

    Flex_4系统组件:图表

    标题中的“Flex_4系统组件:图表”指的是Adobe Flex 4框架中用于创建数据可视化的图表组件。这些组件是Flex SDK的一部分,允许开发者构建交互式的、动态的数据展示应用。Flex 4引入了全新的图形渲染引擎(称为Spark...

    Flex做鼠标拖动的引言

    这是一个做鼠标拖动的PPT,可用于初学者,

    flex鼠标拖动图片

    在本文中,我们将深入探讨如何在Flex环境中实现鼠标拖动图片的功能,并在鼠标松开时停止拖动。Flex是一种基于ActionScript 3.0的开放源代码框架,用于构建富互联网应用程序(RIAs)。它提供了丰富的用户界面组件库,...

    Flex chart line 线性表(单线和双线)

    Flex Chart Line是Adobe Flex框架中的一个关键组件,用于创建数据可视化图表,特别是线性图表。在本场景中,我们关注的是“单线”和“双线”两种类型的线性图表。Flex 4.5是Adobe Flex SDK的一个版本,它提供了更...

    flex Chart

    Flex Chart 是Adobe Flex框架中用于数据可视化的组件集,它提供了强大的图表绘制功能,使得开发者可以轻松地创建各种类型的图表,如柱状图、折线图、饼图、散点图等。在Flex 3中,Chart组件是MXML和ActionScript开发...

    flex做的四种图表(线、柱、饼、区域)直接用js调用

    在Flex中,可以使用mx.charts.LineChart类来创建线图,通过设置series属性添加数据系列,利用dataProvider绑定数据源,还可以自定义轴刻度、图例、颜色等视觉元素。 柱状图则常用于比较不同类别的数据量。Flex中的...

    flex统计图 柱状 饼图折线

    在本讨论中,我们将深入探讨如何使用Flex构建柱状图、饼图和折线图,这些都是数据可视化中常见的图表类型,对于数据分析和展示至关重要。 1. **柱状图(Bar Chart)**: 柱状图是用长条的高度或长度来表示数值大小...

    Flex 拖动,滚动曲线图

    总的来说,"Flex 拖动,滚动曲线图 LineChart"涉及的知识点包括:Flex编程、ActionScript 3.0、mx.charts库中的LineChart组件、mx.controls.Scroller组件的使用,以及鼠标事件处理和图形渲染的原理。掌握这些知识点...

    flex折线图

    在本主题中,我们将深入探讨Flex中如何实现折线图,同时也会涉及到饼状图和柱状图的制作,这些都是数据可视化的常见图表类型。 1. **Flex折线图** 折线图是用于展示连续性数据变化趋势的图表,如时间序列数据。在...

Global site tag (gtag.js) - Google Analytics