该博文转自:http://hi.baidu.com/wangqinlanbd/item/0b2d98797d88f22d5c1789e9
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
preinitialize="init();">
<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"
verticalTickAligned="false">
<mx:verticalStroke>
<mx:Stroke color="haloSilver"
weight="0"
alpha="1.0" />
</mx:verticalStroke>
<mx:horizontalStroke>
<!-- Set alpha to 0 so stroke isn'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 ** minorInterval:y轴线条的间 隔 interval:y轴数值的间隔,maximum:y轴最大值 , minimum:y轴最小值 -->
<mx:verticalAxis>
<mx:LinearAxis id="linearAxis"
baseAtZero="false"
title="Price (USD)"
minorInterval="0.10"
interval="0.5"
maximum="78" minimum="0"
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}" fontSize="12"
canDropLabels="true" />
</mx:horizontalAxisRenderers>
<!-- series -->
<mx:series>
<mx:LineSeries yField="@open"
displayName="Open" />
</mx:series>
</mx:LineChart>
</mx:Application>
分享到:
相关推荐
在Flex编程中,移动折线图是一种常见的交互功能,它允许用户通过拖动来查看数据的不同部分,这对于处理大量数据或者需要动态分析趋势的应用来说非常有用。本篇将深入探讨如何在Flex中实现线图的左右移动,以及...
1. **Flex折线图** 折线图是用于展示连续性数据变化趋势的图表,如时间序列数据。在Flex中,我们可以使用Spark或 Halo 组件库中的Chart类来创建折线图。首先,需要引入所需的库,然后定义一个Chart对象,并设置其...
flex 折线图
本教程将深入讲解如何利用ArcGIS for Flex在地图上显示柱状图、饼状图和折线图,以便于用户更直观地理解地理数据。 首先,我们需要了解ArcGIS for Flex的基本概念。ArcGIS for Flex是一个基于Adobe Flex的开发库,...
在IT行业中,"flex折线的实现"是一个与前端开发相关的知识点,主要涉及到CSS3中的Flexbox布局模型。Flexbox,全称为“Flexible Box”,旨在提供一种更加灵活的方式来处理元素的布局,尤其在响应式设计中表现优秀。...
每个编号的文件可能代表一个独立的示例,比如1可能是柱状图的基础用法,2可能是饼图的进阶展示,3可能是折线图的动态效果,以此类推。 通过研究这些Demo,开发者可以学习到如何配置数据源、调整图表属性、响应用户...
`mx:LineChart` 是Flex中用于绘制折线图的一个图表组件。它可以通过`dataProvider`属性与数据源进行绑定,这里的`dataProvider`就是之前定义的`ArrayCollection`。 ```as3 showDataTips="true" fontSize="12" y=...
在Flex中,饼形图(piechart)、柱形图(columnchart)、条形图(barchart)和折线图(linechart)是数据可视化的重要工具,广泛应用于数据分析和展示。 1. **饼形图(PieChart)** 饼形图用于显示部分与整体之间...
在本压缩包文件"Charts"中,我们聚焦于Flex中的统计图表功能,包括饼状图、柱状图和折线图的实例。这些图表是数据可视化的重要工具,帮助用户直观地理解复杂的数据信息。 饼状图在统计学中被广泛用于显示部分与整体...
在本讨论中,我们将深入探讨如何使用Flex构建柱状图、饼图和折线图,这些都是数据可视化中常见的图表类型,对于数据分析和展示至关重要。 1. **柱状图(Bar Chart)**: 柱状图是用长条的高度或长度来表示数值大小...
在给定的资源中,"Flex制作的几款漂亮的立体柱状图饼状图和折线图"显然涉及到Flex的图表组件,这些组件允许开发者创建出具有专业视觉效果的数据可视化应用。 在Flex中,Chart类是用于展示数据的主要组件。它可以...
1. **Flex图表组件**:Flex提供了多种图表类型,包括折线图、柱状图、饼图等。曲线图,即折线图,用于展示数据随时间变化的趋势。它通过连接一系列数据点形成连续的线条,使用户能够直观地看到数据的变化情况。 2. ...
在本案例中,"flex 实现的折线"指的是使用Flex技术创建的图形元素,具体为一条由多个点连接形成的折线。这种折线通常会用在数据可视化、地图绘制或任何需要表示路径或轨迹的应用中。 在Flex中,我们可以利用`mx....
折线图示例
2. Flex图形组件类型:Flex提供多种图形组件,如BarChart(条形图)、PieChart(饼图)、LineChart(折线图)、AreaChart(面积图)等,适用于不同类型的数据显示需求。 3. 数据绑定:Flex图形组件支持数据绑定,...
将一条折线,等距离偏移一定距离。 把屏幕坐标转换为GIS坐标,可以在地图上偏移折线
FusionCharts是一个知名的图表库,它专为Web应用设计,支持多种图表类型,如折线图、柱状图、饼图、散点图等,用于数据可视化。在Flex环境中,FusionCharts能够帮助开发者轻松地创建动态、交互式的统计图表,使得...
本示例“Flex画线(直线,折线)完美实现”专注于提供一种高效、灵活的方法来绘制动态直线和折线,并允许用户进行实时编辑。通过这个项目,开发者可以学习如何在Flex应用中实现这一功能,提升用户体验。 首先,Flex是...