FLEX实践:各种图表的简单应用
来源:互联网 发布:毛利兰 黑衣组织 知乎 编辑:程序博客网 时间:2024/05/10 20:57
今天抽空学习了一个图表的应用,发现FLEX的图表真的是挺强大的,这里总结一下不同图表的应用
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
backgroundColor="0xFFFFFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#E8D1F9, #E8D1F9]" fontSize="12">
<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:1,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}
];
[Bindable] public var chartDP2:Array = [
{day:'Monday2',rainfall:10,elevation:50,temperature:56},
{day:'Tuesday2',rainfall:7,elevation:227,temperature:88},
{day:'Wednesday2',rainfall:1,elevation:64,temperature:55},
{day:'Thursday2',rainfall:8,elevation:89,temperature:80},
{day:'Friday2',rainfall:11,elevation:370,temperature:65},
{day:'Saturday2',rainfall:12,elevation:730,temperature:40},
{day:'Sunday2',rainfall:14,elevation:128,temperature:34}
];
public var TICKER: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}
];
public var dge:Array = new Array();
]]>
</mx:Script>
<mx:ToggleButtonBar dataProvider="{simpleCharts}"
direction="horizontal" y="27" horizontalCenter="31"/>
<mx:ViewStack id="simpleCharts" x="5" y="76" width="100%">
<mx:Canvas label="BarChart" width="100%">
<mx:BarChart dataProvider="{chartDP}" width="100%">
<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{chartDP}"
categoryField="day" />
</mx:verticalAxis>
<mx:series>
<mx:BarSeries
yField="day" xField="rainfall"
displayName="rainfall" />
</mx:series>
</mx:BarChart>
</mx:Canvas>
<mx:Canvas label="PieChart" width="100%">
<mx:PieChart dataProvider="{chartDP}" width="100%">
<mx:series>
<mx:PieSeries
field="rainfall"
nameField="day"
labelPosition="inside"
displayName="rainfall" />
</mx:series>
</mx:PieChart>
</mx:Canvas>
<mx:Canvas label="ColumnChart" width="100%">
<mx:ColumnChart dataProvider="{chartDP}" width="100%">
<mx:horizontalAxis>
<mx:CategoryAxis id="ca"
categoryField="day"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis baseAtZero='{false}' autoAdjust="{true}" />
</mx:verticalAxis>
<mx:series>
<mx:ColumnSeries xField="day" yField="rainfall" displayName="rainfall"/>
</mx:series>
</mx:ColumnChart>
</mx:Canvas>
<mx:Canvas label="LineChart" width="100%">
<mx:LineChart dataProvider="{chartDP}" showDataTips="true" width="100%">
<mx:horizontalAxis>
<mx:CategoryAxis
categoryField="day"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis baseAtZero='{false}' autoAdjust="{true}" />
</mx:verticalAxis>
<mx:series>
<mx:LineSeries yField="rainfall" displayName="降雨量"/>
<mx:LineSeries yField="temperature" displayName="温度"/>
</mx:series>
</mx:LineChart>
</mx:Canvas>
<mx:Canvas label="BubbleChart" width="100%">
<mx:BubbleChart showDataTips="true" width="100%" backgroundElements="{dge}">
<mx:series>
<mx:BubbleSeries xField="rainfall" yField="temperature" radiusField="temperature" displayName="rainfall" dataProvider="{chartDP}"/>
<mx:BubbleSeries xField="rainfall" yField="temperature" radiusField="temperature" displayName="rainfall2" dataProvider="{chartDP2}"/>
</mx:series>
</mx:BubbleChart>
</mx:Canvas>
<mx:Canvas label="CandleListChart" width="100%">
<mx:CandlestickChart dataProvider="{TICKER}" showDataTips="true" width="100%">
<mx:series>
<mx:CandlestickSeries
openField="open"
highField="high"
lowField="low"
closeField="close"
displayName="TICKER"/>
</mx:series>
</mx:CandlestickChart>
</mx:Canvas>
</mx:ViewStack>
</mx:Application>
运行结果就不贴上来了,有兴趣的朋友自己运行看看吧。。。。。。。
- FLEX实践:各种图表的简单应用
- FLEX实践:TREE与SWFLOADER的简单应用
- 一个简单的flex应用
- MT4图表函数的简单应用
- Flex强大的图表功能
- Flex应用-一个简单的拼图游戏
- flex中videodisplay的简单应用
- echart3图表的实际应用与简单示例
- AMFPHP+FLEX简单应用
- flex 图表
- FLEX 图表
- flex图表
- flex 图表
- Flex 图表
- 简单的javaBean综合应用项目实践
- 基于Flex技术的报表图表集锦
- 自定义flex图表toptip的提示
- 非常棒的Flex图表效果 推荐
- vim常用命令
- cuda中设置vs2005和direct3d关联
- 手把手教你Linux下的多线程设计
- 自定义file类型input的样式
- adodc控件问题
- FLEX实践:各种图表的简单应用
- tnsping命令只是测试端口是否通,不检测服务名是否可以解析
- Linux 上实现双向进程间通信管道
- 独家:深度介绍Linux内核是如何工作的
- 数据库小点点
- WACOM安徽
- oracle不同版本间数据的导入导出/oracle IMP 命令详解
- 当原有的SPFILE丢失后如何生成新的SPFILE
- 代码静态分析工具PC-LINT安装配置