Flash 报表之 LineChart & PieChart

简介: 1.LineChart 主要用于用线条显示数据图表信息  2. LineChart 的使用代码代码 1  2  3      4         [CDATA[ 5             import mx.

1.LineChart 主要用于用线条显示数据图表信息

 

 

2. LineChart 的使用代码

img_405b18b4b6584ae338e0f6ecaf736533.gif 代码
 1  <? xml version = " 1.0 "  encoding = " utf-8 " ?>
 2  < mx:Application xmlns:mx = " http://www.adobe.com/2006/mxml "  layout = " absolute " >
 3       < mx:Script >
 4           <! [CDATA[
 5              import mx.collections.ArrayCollection;
 6              
 7               public  var scores:ArrayCollection = new  ArrayCollection([
 8                  {id: 1 ,name: " 贺臣 " ,Maths: 98 ,Chinese: 82 },
 9                  {id: 2 ,name: " 菜包 " ,Maths: 66 ,Chinese: 77 },
10                  {id: 3 ,name: " 张三 " ,Maths: 23 ,Chinese: 99 },
11                  {id: 4 ,name: " 王五 " ,Maths: 88 ,Chinese: 55 }
12              ]);
13              
14          ]] >
15       </ mx:Script >
16       < mx:Panel x = " 98 "  y = " 40 "  width = " 485 "  height = " 392 "  layout = " absolute " >
17           < mx:LineChart x = " 10 "  y = " 10 "  id = " myLineChart "  width = " 445 "  height = " 261 "  showDataTips = " true "  dataProvider = " {scores} " >
18               < mx:horizontalAxis >
19                   < mx:CategoryAxis dataProvider = " {scores} "  categoryField = " name " />
20               </ mx:horizontalAxis >
21               < mx:series >
22                   < mx:LineSeries yField = " Maths "  xField = " name "  displayName = " 数学 " />
23                   < mx:LineSeries yField = " Chinese "  xField = " name "  displayName = " 中文 " />
24               </ mx:series >
25           </ mx:LineChart >
26           < mx:Legend dataProvider = " {myLineChart} "  x = " 10 "  y = " 289 "  width = " 445 " />
27       </ mx:Panel >
28  </ mx:Application >

 

 

3. LineChart 属性

 xField 用于横坐标数据显示

 yField 用于纵坐标数据显示

 

4. PieChart 主要用于圆饼图显示相关数据,圆饼图分块显示数据所占份额

 

 

5.PieChart 的使用代码

img_405b18b4b6584ae338e0f6ecaf736533.gif 代码
 1  <? xml version = " 1.0 "  encoding = " utf-8 " ?>
 2  < mx:Application xmlns:mx = " http://www.adobe.com/2006/mxml "  layout = " absolute " >
 3       < mx:Script >
 4           <! [CDATA[
 5              import mx.collections.ArrayCollection;
 6              
 7               public  var scores:ArrayCollection = new  ArrayCollection([
 8                  {id: 1 ,name: " 贺臣 " ,Maths: 98 ,Chinese: 82 },
 9                  {id: 2 ,name: " 菜包 " ,Maths: 66 ,Chinese: 77 },
10                  {id: 3 ,name: " 张三 " ,Maths: 23 ,Chinese: 99 },
11                  {id: 4 ,name: " 王五 " ,Maths: 88 ,Chinese: 55 }
12              ]);
13              
14          ]] >
15       </ mx:Script >
16       < mx:Panel x = " 98 "  y = " 40 "  width = " 485 "  height = " 392 "  layout = " absolute " >
17           < mx:PieChart x = " 10 "  y = " 10 "  id = " myPieChart "  height = " 268 "  width = " 445 "  dataProvider = " {scores} "  showDataTips = " true " >
18               < mx:series >
19                   < mx:PieSeries field = " Maths "  nameField = " name "  labelPosition = " callout "  displayName = " 数学 " />
20               </ mx:series >
21           </ mx:PieChart >
22           < mx:Legend dataProvider = " {myPieChart} "  x = " 10 "  y = " 289 "  width = " 445 " />
23          
24       </ mx:Panel >
25  </ mx:Application >
26 

 

 

 

6.PieChart 属性介绍

field 用于显示的数据项

nameField 用于显示数据项的名称

相关文章
|
BI
SAP 报表设置动态ALV标题栏
关于ALV报表多个事务代码下显示不同标题处理
407 0
做报表pdf导出功能实现
做报表pdf导出功能实现
Flash 报表之 CandlestickChart & ColumnChart
1.CandlestickChart 显示金融数据为一系列的蜡烛图,其体现高低开关的相关数值。每个图像的垂直线上的上顶点和下地点代表了每个数据点的高低数值,填充盒子的上顶和下底分别代表开发和关闭的数值。
1165 0
Flash 报表之 BarChart & BubbleChart
1.BarChart 显示数据为一系列的水平条,起长度代表着相应的数值。   以上是BarChart 的效果图,显示了不同学生数学和中文的成绩   2.BarChart 使用代码 代码  1  2      3         [CDATA[ 4             import mx.
993 0
Flash 报表之 AreaChart
1.Flex 图表组件介绍 在Flex 中提供了一系列图表组件,可以使用图表或图形来显示数据 Flex 中可以把表格数据分为条形图表(Bar),饼行图表(Pie),折线图表(Line).   2.Flex 支持的坐标轴 CategoryAxis: 对应一组数组值到坐标轴上面。
858 0
|
新零售 存储 BI
尺码类报表的制作
交叉报表,坐标
1189 0
报告式报表的制作
报告式报表
1868 0