`
sorehead
  • 浏览: 47089 次
  • 性别: Icon_minigender_2
  • 来自: 达纳苏斯
社区版块
存档分类
最新评论

Flex中如何给LineChart设置坐标轴最大最小范围

阅读更多
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        preinitialize="init();" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            import mx.charts.chartClasses.IAxis;
            import mx.formatters.CurrencyFormatter;

            private var currFormatter:CurrencyFormatter;

            private function init():void {
                currFormatter = new CurrencyFormatter();
                currFormatter.precision = 2;
            }

            private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
                return currFormatter.format(item);
            }

            private function lineChart_creationComplete():void {
                var linearAxisMinimum:int = Math.floor(linearAxis.computedMinimum);
                var linearAxisMaximum:int = Math.ceil(linearAxis.computedMaximum);
                linearAxis.minimum = linearAxisMinimum;
                linearAxis.maximum = linearAxisMaximum;
            }
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <quote date="8/27/2007" open="40.38" close="40.81" />
                <quote date="8/24/2007" open="40.5" close="40.41" />
                <quote date="8/23/2007" open="40.82" close="40.6" />
                <quote date="8/22/2007" open="40.4" close="40.77" />
                <quote date="8/21/2007" open="40.41" close="40.13" />
                <quote date="8/20/2007" open="40.55" close="40.74" />
                <quote date="8/17/2007" open="40.18" close="40.32" />
                <quote date="8/16/2007" open="39.83" close="39.96" />
                <quote date="8/15/2007" open="40.22" close="40.18" />
                <quote date="8/14/2007" open="41.01" close="40.41" />
                <quote date="8/13/2007" open="41" close="40.83" />
                <quote date="8/10/2007" open="41.3" close="41.06" />
                <quote date="8/9/2007" open="39.9" close="40.75" />
                <quote date="8/8/2007" open="39.61" close="40.23" />
                <quote date="8/7/2007" open="39.08" close="39.42" />
                <quote date="8/6/2007" open="38.71" close="39.38" />
                <quote date="8/3/2007" open="39.47" close="38.75" />
                <quote date="8/2/2007" open="39.4" close="39.52" />
                <quote date="8/1/2007" open="40.29" close="39.58" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="minimum:">
                <mx:HSlider id="minSlider"
                        minimum="28"
                        maximum="38"
                        value="38"
                        liveDragging="true"
                        snapInterval="1"
                        change="linearAxis.minimum = event.value;" />
            </mx:FormItem>
            <mx:FormItem label="maximum:">
                <mx:HSlider id="maxSlider"
                        minimum="42"
                        maximum="52"
                        value="42"
                        liveDragging="true"
                        snapInterval="1"
                        change="linearAxis.maximum = event.value;" />
            </mx:FormItem>
        </mx:Form>

        <mx:Spacer width="100%" />

        <mx:Legend dataProvider="{lineChart}"
                direction="horizontal" />
    </mx:ApplicationControlBar>

    <mx:LineChart id="lineChart"
            showDataTips="true"
            dataProvider="{dp}"
            width="100%"
            height="100%"
            creationComplete="lineChart_creationComplete();">

        <mx:backgroundElements>
            <mx:GridLines id="gridLines"
                    direction="both"
                    verticalTickAligned="false">
                <mx:verticalStroke>
                    <mx:Stroke color="haloSilver"
                            weight="0"
                            alpha="1.0" />
                </mx:verticalStroke>
                <mx:horizontalStroke>
                    <!-- Set alpha to 0 so stroke isn&apos;t visible. -->
                    <mx:Stroke color="white"
                            weight="0"
                            alpha="0.0" />
                </mx:horizontalStroke>
                <mx:horizontalFill>
                    <mx:SolidColor color="haloSilver"
                            alpha="0.1" />
                </mx:horizontalFill>
            </mx:GridLines>
        </mx:backgroundElements>

        <!-- vertical axis -->
        <mx:verticalAxis>
            <mx:LinearAxis id="linearAxis"
                    baseAtZero="false"
                    title="Price (USD)"
                    minorInterval="0.10"
                    interval="0.5"
                    labelFunction="linearAxis_labelFunc" />
        </mx:verticalAxis>

        <!-- horizontal axis -->
        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca"
                    categoryField="@date"
                    title="Date" />
        </mx:horizontalAxis>

        <!-- horizontal axis renderer -->
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer axis="{ca}"
                    canDropLabels="true" />
        </mx:horizontalAxisRenderers>

        <!-- series -->
        <mx:series>
            <mx:LineSeries yField="@open"
                    displayName="Open" />
        </mx:series>
    </mx:LineChart>

</mx:Application>

 

分享到:
评论

相关推荐

    flex 改变linechart datatips 显示样式代码

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

    flex LineChart

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

    Flex LineChart

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

    flex LineChart实例

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

    flex_linechart

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

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

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

    Flex画 坐标轴曲线 项目用过的 flex4 开发

    在Flex4开发中,创建坐标轴曲线图是一种常见的需求,特别是在数据可视化和图表展示的应用中。Flex是一个基于ActionScript和MXML的开放源代码框架,主要用于构建富互联网应用程序(RIA)。它提供了强大的图形和组件库...

    Flex BlazeDs 推数据生成lineChart实例

    Flex BlazeDs推数据生成lineChart实例是一个典型的前端与后端实时通信的应用场景,它结合了Adobe Flex技术用于前端用户界面的构建,BlazeDS作为数据推送服务,以及使用lineChart组件来展示动态更新的数据。...

    Fusioncharts破解,支持flex4钻取。chart横坐标中文竖直显示。

    NULL 博文链接:https://qinxiaotao.iteye.com/blog/1538116

    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漂亮的柱状图,横坐标倾斜45度显示amChart

    标题中提到的"Flex漂亮的柱状图,横坐标倾斜45度显示amChart",意味着我们将探讨如何在Flex中利用amChart库创建出具有倾斜横坐标轴的柱状图,同时保持良好的视觉效果和字符完整性,即使横坐标标签很长。 首先,让...

    flex TitleWindow自定义最大最小化

    本教程将深入探讨如何在Flex中实现TitleWindow的自定义最大最小化功能。 首先,我们需要理解TitleWindow的基本结构。TitleWindow是MX容器的子类,它继承了BasicWindow类,包含了标题栏和边框。默认情况下,...

    Flex带最大化最小化的TitleWindow

    TitleWindow是Flex中的一种容器类,它类似于操作系统中的窗口,通常包含一个标题栏,可以显示标题,并提供一些基本操作,如关闭、最小化、最大化和还原。在本例中,我们讨论的是一个自定义的TitleWindow组件,它增加...

    flex窗口最大最小化

    本教程将详细讲解如何使用Flex来实现窗口的拖拽、最大化、最小化以及关闭功能,这些都是构建交互式用户界面的重要元素。 首先,让我们了解Flex的基本概念。Flex布局允许开发者对容器内的子元素进行灵活的排版,通过...

    FLEX 实现坐标系转换

    在IT行业中,尤其是在地理信息系统(GIS)和图形用户界面(GUI)开发中,坐标转换是一项重要的任务。这里我们将深入探讨如何使用Adobe Flex技术来实现坐标系的转换。 Flex是一种基于ActionScript 3.0的开源框架,...

    【实例】flex4 动态获取对象属性,动态生成数据源,动态生成lineChart,清除数据。

    flex4 动态获取对象属性,动态生成数据源,动态生成lineChart,清除数据。 1.该图表的数据源为ArrayCollection类型的arrayC 2.每增加一条线,其实就是增加一个数据源中的ArrayCollection每个对象的一个属性,且属性...

    flex chart

    Flex Chart 是 Flex SDK 中的一个重要组件,用于可视化数据,帮助用户以图形方式理解复杂的信息。 在博文链接提供的“https://shuiyan.iteye.com/blog/628704”中,虽然具体内容无法直接查看,但我们可以推测博主...

    Flex Chart 使用教程(含源代码)

    4. 配置Axis:为图表添加X轴和Y轴,设置轴的范围、刻度、标签等属性。 5. 设置ItemRenderers:自定义项渲染器,以改变数据点的外观。 6. 添加到舞台上:将Chart对象添加到应用程序的舞台中,完成图表的显示。 四、...

Global site tag (gtag.js) - Google Analytics