2009-03-18 night_stalker (资深程序员)
举例如下:
定义笔触(颜色和粗细)
<mx:Stroke id = "s1" color="blue" weight="2"/>
定义填充
<mx:SolidColor id="sc1" color="blue" alpha=".3"/>
使用笔触
<mx:LineSeries yField="Profit" form="curve" displayName="Profit" lineStroke="{s1}"/>
使用笔触和填充
<mx:AreaSeries yField="Profit" form="curve" displayName="Profit" areaStroke="{s1}" areaFill="{sc1}"/>
一个LineChart的完全例子,使用了3种笔触和填充,摘自http://www.airia.cn/FLEX4API/livedocs/
1. <?xml version="1.0"?>
2. <!-- Simple example to demonstrate the LineChart and AreaChart controls. -->
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
4.
5. <mx:Script>
6. <![CDATA[
7.
8. import mx.collections.ArrayCollection;
9.
10. [Bindable]
11. private var expensesAC:ArrayCollection = new ArrayCollection( [
12. { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
13. { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
14. { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
15. { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
16. { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
17. ]]>
18. </mx:Script>
19.
20. <!-- Define custom colors for use as fills in the AreaChart control. -->
21. <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
22. <mx:SolidColor id="sc2" color="red" alpha=".3"/>
23. <mx:SolidColor id="sc3" color="green" alpha=".3"/>
24.
25. <!-- Define custom Strokes. -->
26. <mx:Stroke id = "s1" color="blue" weight="2"/>
27. <mx:Stroke id = "s2" color="red" weight="2"/>
28. <mx:Stroke id = "s3" color="green" weight="2"/>
29.
30. <mx:Panel title="LineChart and AreaChart Controls Example"
31. height="100%" width="100%" layout="horizontal">
32.
33. <mx:LineChart id="linechart" height="100%" width="45%"
34. paddingLeft="5" paddingRight="5"
35. showDataTips="true" dataProvider="{expensesAC}">
36.
37. <mx:horizontalAxis>
38. <mx:CategoryAxis categoryField="Month"/>
39. </mx:horizontalAxis>
40.
41. <mx:series>
42. <mx:LineSeries yField="Profit" form="curve" displayName="Profit" lineStroke="{s1}"/>
43. <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses" lineStroke="{s2}"/>
44. <mx:LineSeries yField="Amount" form="curve" displayName="Amount" lineStroke="{s3}"/>
45. </mx:series>
46. </mx:LineChart>
47.
48. <mx:Legend dataProvider="{linechart}"/>
49.
50. <mx:AreaChart id="Areachart" height="100%" width="45%"
51. paddingLeft="5" paddingRight="5"
52. showDataTips="true" dataProvider="{expensesAC}">
53.
54. <mx:horizontalAxis>
55. <mx:CategoryAxis categoryField="Month"/>
56. </mx:horizontalAxis>
57.
58. <mx:series>
59. <mx:AreaSeries yField="Profit" form="curve" displayName="Profit" areaStroke="{s1}" areaFill="{sc1}"/>
60. <mx:AreaSeries yField="Expenses" form="curve" displayName="Expenses" areaStroke="{s2}" areaFill="{sc2}"/>
61. <mx:AreaSeries yField="Amount" form="curve" displayName="Amount" areaStroke="{s3}" areaFill="{sc3}"/>
62. </mx:series>
63. </mx:AreaChart>
64.
65. <mx:Legend dataProvider="{Areachart}"/>
66.
67. </mx:Panel>
68. </mx:Application>
分享到:
相关推荐
以下是我最近做flex组件编程时的总结,是主要针对lineChart的用法,其中某些属性对同是有横纵坐标的columnChart、barChart等都有效,比如对背景的网格线、横纵坐标线条的粗细颜色和标签的设置都有效。
改变datatips显示字体大小的方法,也可以跟据这种方法自己定义别的样式。 包含了linechart样式的改变,颜色也可以改变
Flex Chart Sytles 简单示例 基本样式使用,网上搜到的收藏下。
flex LineChart实例个人项目开发中的一个页面
flex项目开发过程中的动态linechart,主要是曲线可以增量的刷新,纵坐标、刷新频率可以调整,也可以稍微改下根据配置进行曲线设置,这个是少了获取数据的方法用随机数代替,项目中用到动态linechart的可以参考。
预览地址: http://www.iflex4.com/samples/fusionchartsample/chartsample.html 由www.iflex4.com制作 qq群:121987778
学习使用Flex Chart。 只用控件,不会AS不要紧。
对flex各组件演示demo 并配有对应源码,适合学习参考
Flex BlazeDs 推数据生成lineChart实例 前台生成lineChart 实时监控可作参考
全面介绍flex的事件流机制,显示列表及拖拽的实现过程
flex4 动态获取对象属性,动态生成数据源,动态生成lineChart,清除数据。 1.该图表的数据源为ArrayCollection类型的arrayC 2.每增加一条线,其实就是增加一个数据源中的ArrayCollection每个对象的一个属性,且属性...
flex 地图开发demo,将arcgis和flex结合开发使用
Flex Library AsDoc Demo 查看我的博客<Flex AsDoc 完整版>,有详细的Flex Library AsDoc说明
FLEX AWAY3D DEMO away3d 导入模型 demo
QTP的Flex 插件的DEMO
使用flex写的rpg demo,欢迎来我博客作客。。。 http://blog.csdn.net/yaojian12/archive/2010/03/04/5346311.aspx
多款风格的Flex的Demo、柱状图、饼图、折线图等,好不容易才找得到的,非常不错的Flex的使用demo!
Flex4 Login DEMO project
flex 4 chart 控件, 可以做出比较漂亮的图
很好的spring与FLEX集成例子,深层FLEX应用,例子简单易懂