图表有多种类型,在使用之前必须清楚工具箱中有哪些图表可供调用。
每一种图表都有一个ChartSeries 对象与之对应。要将数据显式地表示为某个特定的图表,
就要先添加对应的数列类型然后绑定到一个数据提供器上。ChartSeries 对象定义了在图表的
x 轴和y 轴上显示何种数据以及数据列的名称。数据列名称可以添加滤镜来显示,包括阴影
模糊或者发光的效果。
根据数据的不同格式,你可能需要自定义一个横向或纵向的坐标。如果数据是一个集合,如
日期、国家、人,你就需要使用类坐标(CategoryAxis)。如果数据是单纯的数字,就要使用
线性坐标(LinearAxis)。
图表的数据提供器可以是一个数组或多个类的集合,也可以是XMLList 对象。如果你要在
图表标签上设置一个数据提供器,那么数据列对象就会继承这个数据提供器,或者你可以选
择为每个数据列对象单独地指定一个数据提供器。不同的数据列可以使用不同的数据提供
器。一个图表不需要使用数据提供器里面的所有数据,可以只使用指定的部分数据。
可以用与以下代码创建条状图和饼状图:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal" backgroundColor="0xFFFFFF">
<mx:Script>
<![CDATA[
// a basic data set
[Bindable] public var chartDP:Array = [
{day:'Monday',rainfall:10,elevation:100,temperature:78},
{day:'Tuesday',rainfall:7,elevation:220,temperature:66},
{day:'Wednesday',rainfall:5,elevation:540,temperature:55},
{day:'Thursday',rainfall:8,elevation:60,temperature:84},
{day:'Friday',rainfall:11,elevation:390,temperature:52},
{day:'Saturday',rainfall:12,elevation:790,temperature:45},
{day:'Sunday',rainfall:14,elevation:1220,temperature:24}
];
]]>
</mx:Script>
<mx:ToggleButtonBar dataProvider="{simpleCharts}" direction="vertical" />
<mx:ViewStack id="simpleCharts" >
<mx:Canvas label="Bar">
<mx:BarChart dataProvider="{chartDP}" >
<mx:verticalAxis>
<mx:CategoryAxis dataProvider="{chartDP}" categoryField="day" />
</mx:verticalAxis>
<mx:series>
<!-- bar chart uses a BarSeries -->
<mx:BarSeries yField="day" xField="rainfall" displayName="day" />
</mx:series>
</mx:BarChart>
</mx:Canvas>
<mx:Canvas label="Pie">
<mx:PieChart dataProvider="{chartDP}" >
<!-- no axes need to be defined in a pie chart -->
<mx:series>
<!-- pie chart uses a pie series -->
<mx:PieSeries field="rainfall" nameField="day" labelPosition="callout" displayName="rainfall" />
</mx:series>
</mx:PieChart>
</mx:Canvas>
</mx:ViewStack>
</mx:Application>
柱状图和HighLowOpenClose 图表则需要一些不同类型的数据集合:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal" backgroundColor="0xFFFFFF">
<mx:Script>
<![CDATA[
// the field names don't need to be 'high','open','low',
//and 'close', butyou need four different fields to get this kind
//of chart to work
[Bindable] public var highLowChartDP:Array = [
{date:"1-Aug-05",open:42.57,high:43.08,low:42.08,close:42.75},
{date:"2-Aug-05",open:42.89,high:43.5,low:42.61,close:43.19},
{date:"3-Aug-05",open:43.19,high:43.31,low:42.77,close:43.22},
{date:"4-Aug-05",open:42.89,high:43,low:42.29,close:42.71},
{date:"5-Aug-05",open:42.49,high:43.36,low:42.02,close:42.99},
{date:"8-Aug-05",open:43,high:43.25,low:42.61,close:42.65},
{date:"9-Aug-05",open:42.93,high:43.89,low:42.91,close:43.82},
{date:"10-Aug-05",open:44,high:44.39,low:43.31,close:43.38},
{date:"11-Aug-05",open:43.39,high:44.12,low:43.25,close:44},
{date:"12-Aug-05",open:43.46,high:46.22,low:43.36,close:46.1}
];
]]>
</mx:Script>
<mx:CandlestickChart dataProvider="{highLowChartDP}" showDataTips="true">
<mx:verticalAxis>
<mx:LinearAxis minimum="40" maximum="50" />
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="date" />
</mx:horizontalAxis>
<mx:series>
<mx:CandlestickSeries dataProvider="{highLowChartDP}" alpha=".5" openField="open" highField="high"
lowField="low" closeField="close" displayName="Rainfall">
<mx:rollOverEffect>
<mx:Fade alphaFrom=".5" alphaTo="1" duration="500"/>
</mx:rollOverEffect>
<mx:rollOutEffect>
<mx:Fade alphaFrom="1" alphaTo=".5" duration="500" />
</mx:rollOutEffect>
</mx:CandlestickSeries>
</mx:series>
</mx:CandlestickChart>
</mx:Application>
分享到:
相关推荐
Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记
Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表...
这是作者自己亲自编写的教程,里面包含的有图解教程,各式jar,及配置文件,全部包含在内,如果你是一个决定学习flex初学者,我敢保证它肯定适合你!带上你走上flex开发旅途!
flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记
包中带有4个flex 项目工程,其中有图表库文件(flare),图表示例项目demos),是非常完整的flex 动画图表的算法实现与图形实现,是学习的非常好的源码
最近开始学习Flex,其中用到了AS,AS2到AS3发生了很大的变化,完全的面向对象,知道这个特点以后我也一直没有特意的好好去学学AS3,但是随着最近学习的深入,还是有必要学习一下
利用Flex和PHP创建网站视频发布系统.doc利用Flex和PHP创建网站视频发布系统.doc利用Flex和PHP创建网站视频发布系统.doc利用Flex和PHP创建网站视频发布系统.doc利用Flex和PHP创建网站视频发布系统.doc利用Flex和PHP...
flex学习资料flex学习资料flex学习资料
flex学习记录flex学习记录flex学习记录flex学习记录flex学习记录flex学习记录
Flex学习笔记1
flex与java关系类型映射图表 搞java与flex开发的人必备
NULL 博文链接:https://zh-dream-success.iteye.com/blog/1685429
使用flex写的四种图表,用于web前台显示,加入了保存图表图片的功能。
Flex图表插件
flex柱状图表很漂亮的源码
chart.rar--java+flex图表 Flex3高级图表开发指南.pdf--英文的 Flex+白皮书.pdf flex-demo.rar Flex入门培训资料及PPT.rar flex中文帮助.pdf InfoQ Flex与JSON及XML的互操作.mht 结合java做的flex图表例子 - 点点...
flex 学习笔记 初学flex的朋友 可以下载了看看 老鸟直接飘过。。。
Flex学习笔记(flex必知必会).docFlex学习笔记(flex必知必会).doc
flex 学习文档 Flex 3 Cookbook pdf Flex 3 Cookbook源码
flex学习资料flex学习资料flex学习资料flex学习资料flex学习资料flex学习资料flex学习资料flex学习资料