Flex LineChart曲线——动态加载组件
最近在学习Flex 和Asp.net互操作,在网上查找了一些资料,综合后, 做出了这个动态加载组件的LineChart曲线。尚有不足之处请予以指正:谢谢。
下面是完整代码:

1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%"
3 initialize="addArray()">
4
5 <mx:Script><![CDATA[
6
7 private var Width:int = 1000
8 private var Height:int = 400
9 private var fontColor:String = "0x000000"
10
11
12 import mx.charts.CategoryAxis;
13 import mx.charts.LineChart;
14 import mx.charts.Legend;
15 import mx.charts.series.LineSeries;
16 import mx.containers.HBox;
17 import mx.collections.ArrayCollection;
18 import ChatCreate;
19 [Bindable]
20 public var expenses:ArrayCollection = new ArrayCollection([
21 { Day: 100, a: 200, b: 1500,c: 450 },
22 { Day: 300, a: 100, b: 200, c: 600 },
23 { Day: 500, a: 450, b: 500, c: 300 },
24 { Day: 700, a: 280, b: 1200,c: 900 },
25 { Day: 900, a: 640, b: 575, c: 500 }
26 ]);
27
28 public var chartArray:Array = new Array
29 public static var lineChart:LineChart=new LineChart;
30 public static var myArray:Array = new Array("a","b","c");
31
32 public function addArray():void{
33
34 var myLineSeries:Array=new Array();
35 for (var i:int=0; i < myArray.length; i++)
36 {
37
38 var _titleArr:Array=myArray[i].toString().split(",")
39
40 var lineChart:LineChart=new LineChart
41
42 lineChart.width=Width
43
44 lineChart.height=Height
45
46 lineChart.setStyle("color", fontColor)
47
48 lineChart.dataProvider=expenses;
49
50
51
52 var lineHAxis:CategoryAxis=new CategoryAxis()
53
54 lineHAxis.categoryField="Day";
55
56 lineHAxis.dataProvider=expenses;
57
58 lineChart.horizontalAxis=lineHAxis;
59
60
61
62
63
64 for (var j:int=0; j < _titleArr.length; j++)
65
66 {
67
68 var lineSeries:LineSeries=new LineSeries();
69
70 lineSeries.xField="Day";
71
72 lineSeries.yField=_titleArr[j];
73
74 lineSeries.displayName=_titleArr[j];
75
76 myLineSeries.push(lineSeries);
77
78 }
79 }
80 lineChart.series=myLineSeries;
81
82 var chartLegend:Legend=new Legend
83
84 chartLegend.setStyle("color", fontColor)
85
86 chartLegend.dataProvider=lineChart;
87
88 lineChart.showDataTips=true;
89
90
91
92 var hbox:HBox=new HBox
93
94 hbox.addChild(lineChart);
95
96 hbox.addChild(chartLegend);
97
98 this.addChild(hbox);
99
100 chartArray.push(hbox);
101
102 //}
103 }
104 ]]></mx:Script>
105
106 </mx:Application>
107
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%"
3 initialize="addArray()">
4
5 <mx:Script><![CDATA[
6
7 private var Width:int = 1000
8 private var Height:int = 400
9 private var fontColor:String = "0x000000"
10
11
12 import mx.charts.CategoryAxis;
13 import mx.charts.LineChart;
14 import mx.charts.Legend;
15 import mx.charts.series.LineSeries;
16 import mx.containers.HBox;
17 import mx.collections.ArrayCollection;
18 import ChatCreate;
19 [Bindable]
20 public var expenses:ArrayCollection = new ArrayCollection([
21 { Day: 100, a: 200, b: 1500,c: 450 },
22 { Day: 300, a: 100, b: 200, c: 600 },
23 { Day: 500, a: 450, b: 500, c: 300 },
24 { Day: 700, a: 280, b: 1200,c: 900 },
25 { Day: 900, a: 640, b: 575, c: 500 }
26 ]);
27
28 public var chartArray:Array = new Array
29 public static var lineChart:LineChart=new LineChart;
30 public static var myArray:Array = new Array("a","b","c");
31
32 public function addArray():void{
33
34 var myLineSeries:Array=new Array();
35 for (var i:int=0; i < myArray.length; i++)
36 {
37
38 var _titleArr:Array=myArray[i].toString().split(",")
39
40 var lineChart:LineChart=new LineChart
41
42 lineChart.width=Width
43
44 lineChart.height=Height
45
46 lineChart.setStyle("color", fontColor)
47
48 lineChart.dataProvider=expenses;
49
50
51
52 var lineHAxis:CategoryAxis=new CategoryAxis()
53
54 lineHAxis.categoryField="Day";
55
56 lineHAxis.dataProvider=expenses;
57
58 lineChart.horizontalAxis=lineHAxis;
59
60
61
62
63
64 for (var j:int=0; j < _titleArr.length; j++)
65
66 {
67
68 var lineSeries:LineSeries=new LineSeries();
69
70 lineSeries.xField="Day";
71
72 lineSeries.yField=_titleArr[j];
73
74 lineSeries.displayName=_titleArr[j];
75
76 myLineSeries.push(lineSeries);
77
78 }
79 }
80 lineChart.series=myLineSeries;
81
82 var chartLegend:Legend=new Legend
83
84 chartLegend.setStyle("color", fontColor)
85
86 chartLegend.dataProvider=lineChart;
87
88 lineChart.showDataTips=true;
89
90
91
92 var hbox:HBox=new HBox
93
94 hbox.addChild(lineChart);
95
96 hbox.addChild(chartLegend);
97
98 this.addChild(hbox);
99
100 chartArray.push(hbox);
101
102 //}
103 }
104 ]]></mx:Script>
105
106 </mx:Application>
107
下面是运行效果:
这是我研究了整整一个周的结果。虽然不是很完善。但是这是我学习后的结果。所以希望大家多多指正。各抒己见。谢谢大家.
而且我准备把上面的ArrayCollection也动态生成。然后在Js和Flex交互的时候把数据集传过来。以致让其动态显示。 但是时间有限而且貌似有点棘手,望高手不吝赐教! 在此谢过!
作者:Stephen-kzx
出处:http://www.cnblogs.com/axing/
公众号:会定时分享写工作中或者生活中遇到的小游戏和小工具源码。有兴趣的帮忙点下关注!感恩!
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述