1.添加一个最简单的柱状图
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<?xml version=
"1.0"
encoding=
"utf-8"
?>
<s:Application xmlns:fx=
"http://ns.adobe.com/mxml/2009"
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
private
var
arr:
Array
= [{id:
1
,city:
'北京'
,money:
1000
,pay:
300
},{id:
2
,city:
'上海'
,money:
1200
,pay:
500
},{id:
3
,city:
'天津'
,money:
800
,pay:
200
}];
]]>
</fx:Script>
<mx:BarChart x=
"110"
y=
"27"
id=
"barchart1"
dataProvider=
"{arr}"
showDataTips=
"true"
selectionMode=
"single"
>
<mx:series>
<mx:BarSeries displayName=
"收入"
xField=
"money"
/>
<mx:BarSeries displayName=
"支出"
xField=
"pay"
/>
</mx:series>
<mx:verticalAxis>
<mx:CategoryAxis categoryField=
"city"
/>
</mx:verticalAxis>
</mx:BarChart>
<mx:Legend dataProvider=
"{barchart1}"
/>
</s:Application>
|
这个例子使用Array做为数据源，柱状图使用mx:BarChart组件，这个例子很简单，就不讲解了
2.在上面例子的基础上，添加一个特效，就是图表默认是半透明的，在鼠标移到图标上时渐变为不透明，移开时渐变为半透明
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<?xml version=
"1.0"
encoding=
"utf-8"
?>
<s:Application xmlns:fx=
"http://ns.adobe.com/mxml/2009"
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
private
var
arr:
Array
= [{id:
1
,city:
'北京'
,money:
1000
,pay:
300
},{id:
2
,city:
'上海'
,money:
1200
,pay:
500
},{id:
3
,city:
'天津'
,money:
800
,pay:
200
}];
]]>
</fx:Script>
<mx:BarChart alpha=
"0.5"
x=
"110"
y=
"27"
id=
"barchart1"
dataProvider=
"{arr}"
showDataTips=
"true"
selectionMode=
"single"
>
<mx:series>
<mx:BarSeries displayName=
"收入"
xField=
"money"
/>
<mx:BarSeries displayName=
"支出"
xField=
"pay"
/>
</mx:series>
<mx:verticalAxis>
<mx:CategoryAxis categoryField=
"city"
/>
</mx:verticalAxis>
<mx:rollOverEffect>
<s:Fade alphaFrom=
"0.5"
alphaTo=
"1"
duration=
"1000"
/>
</mx:rollOverEffect>
<mx:rollOutEffect>
<s:Fade alphaFrom=
"1"
alphaTo=
"0.5"
duration=
"1000"
/>
</mx:rollOutEffect>
</mx:BarChart>
<mx:Legend dataProvider=
"{barchart1}"
/>
</s:Application>
|
3.添加一个最简单的饼状图
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<?xml version=
"1.0"
encoding=
"utf-8"
?>
<s:Application xmlns:fx=
"http://ns.adobe.com/mxml/2009"
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<![CDATA[
[Bindable]
private
var
arr:
Array
= [{id:
1
,city:
'北京'
,money:
1000
,pay:
300
},{id:
2
,city:
'上海'
,money:
1200
,pay:
500
},{id:
3
,city:
'天津'
,money:
800
,pay:
200
}];
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<mx:PieChart x=
"110"
y=
"51"
id=
"piechart1"
dataProvider=
"{arr}"
showAllDataTips=
"true"
selectionMode=
"single"
>
<mx:series>
<mx:PieSeries displayName=
"Series 1"
field=
"money"
labelPosition=
"callout"
labelField=
"city"
nameField=
"city"
/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider=
"{piechart1}"
direction=
"horizontal"
labelPlacement=
"right"
/>
</s:Application>
|
这里需要说明一下mx:PieSeries标签里面的几个属性：labelField和labelPosition分别是指饼图每块显示的内容和位置，nameField是指图例Legend显示的内容
4.添加一个竖版柱状图
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<?xml version=
"1.0"
encoding=
"utf-8"
?>
<s:Application xmlns:fx=
"http://ns.adobe.com/mxml/2009"
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<![CDATA[
[Bindable]
private
var
arr:
Array
= [{id:
1
,city:
'北京'
,money:
1000
,pay:
300
},{id:
2
,city:
'上海'
,money:
1200
,pay:
500
},{id:
3
,city:
'天津'
,money:
800
,pay:
200
}];
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<mx:ColumnChart x=
"100"
y=
"90"
id=
"columnchart1"
dataProvider=
"{arr}"
showDataTips=
"true"
selectionMode=
"single"
>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField=
"city"
/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries displayName=
"收入"
yField=
"money"
/>
<mx:ColumnSeries displayName=
"支出"
yField=
"pay"
/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider=
"{columnchart1}"
/>
</s:Application>
|
跟第一个例子非常相似，只是使用的组件是mx:ColumnChart