flex---->图表控件
1、区域型图表AreaChart
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
// 绑定数据集
public var expenses:ArrayCollection = new ArrayCollection(
[
{Month:"一月", Profit:2000, Expenses:1500, Amount:450},
{Month:"二月", Profit:1000, Expenses:200, Amount:600},
{Month:"三月", Profit:1500, Expenses:500, Amount:300}
]
);
]]>
</mx:Script>
<!-- 创建面板容器 -->
<mx:Panel title="图表控件的使用">
<!-- 创建AreaChart图表 -->
<mx:AreaChart id="myChart" dataProvider="{expenses}" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{expenses}" categoryField="Month" />
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries yField="Profit" displayName="利润" />
</mx:series>
</mx:AreaChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
AreaChart 使用外部数据源
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<!-- 创建XML格式数据模型 -->
<mx:Model id="expenses" source="assets/data.xml" />
<mx:Panel title="Area Chart">
<!-- 创建 AreaChart 图表 -->
<mx:AreaChart id="myChart" dataProvider="{expenses.result}"
showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses.result}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries
yField="Profit"
displayName="月份"
/>
</mx:series>
</mx:AreaChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
assets/data.xml的内容如下
<data> <result> <Month>一月</Month> <Profit>2000</Profit> <Expenses>1500</Expenses> <Amount>450</Amount> </result> <result> <Month>二月</Month> <Profit>1000</Profit> <Expenses>200</Expenses> <Amount>600</Amount> </result> <result> <Month>三月</Month> <Profit>1500</Profit> <Expenses>500</Expenses> <Amount>300</Amount> </result> </data>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
// 创建数组集合，用于图表数据源
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"一月", Profit:2000, Expenses:1500, Amount:450},
{Month:"二月", Profit:1000, Expenses:200, Amount:600},
{Month:"三月", Profit:1500, Expenses:500, Amount:300}
]);
]]>
</mx:Script>
<mx:Panel title="Area Chart">
<!-- 创建 AreaChart 图表 -->
<mx:AreaChart id="myChart" dataProvider="{expenses}"
showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries
yField="Profit"
displayName="利润"
form="curve"
/>
<mx:AreaSeries
yField="Expenses"
displayName="费用"
form="curve"
/>
</mx:series>
</mx:AreaChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
二、BarChart
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
// 创建数组集合，用于图表数据源
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"一月", Profit:2000, Expenses:1500},
{Month:"二月", Profit:1000, Expenses:200},
{Month:"三月", Profit:1500, Expenses:500}
]);
]]>
</mx:Script>
<mx:Panel>
<!-- 创建 BarChart 图表 -->
<mx:BarChart id="myChart" dataProvider="{expenses}">
<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:verticalAxis>
<mx:series>
<mx:BarSeries
yField="Month"
xField="Profit"
displayName="利润"
/>
<mx:BarSeries
yField="Month"
xField="Expenses"
displayName="费用"
/>
</mx:series>
</mx:BarChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
三、泡沫型图表BubbleChart
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
// 创建数组集合，用于图表数据源
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"一月", Profit:2000, Expenses:120, Amount:45},
{Month:"二月", Profit:1000, Expenses:200, Amount:60},
{Month:"三月", Profit:1500, Expenses:500, Amount:30}
]);
]]>
</mx:Script>
<mx:Panel>
<!-- 创建 BubbleChart图表 -->
<mx:BubbleChart id="myChart"
minRadius="1"
maxRadius="50"
dataProvider="{expenses}"
showDataTips="true"
>
<mx:series>
<mx:BubbleSeries
xField="Profit"
yField="Expenses"
radiusField="Amount"
displayName="Profit"
/>
</mx:series>
</mx:BubbleChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
四、线型图表LineChart
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
// 创建一个数组并填充数据
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"1月", Profit:2000, Expenses:1500, Amount:450},
{Month:"2月", Profit:1000, Expenses:200, Amount:600},
{Month:"3月", Profit:1500, Expenses:500, Amount:300}
]);
]]>
</mx:Script>
<mx:Panel title="线型图表">
<!-- 创建 LineChart 图表 -->
<mx:LineChart id="myChart" dataProvider="{expenses}" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{expenses}" categoryField="Month" />
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries yField="Profit" displayName="利润" />
<mx:LineSeries yField="Expenses" displayName="费用" />
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{myChart}" />
</mx:Panel>
</mx:Application>
五、圆饼型图表PieChart
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
// 创建数组集合并填充数据
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Expense:"购物", Amount:2000},
{Expense:"房租", Amount:1000},
{Expense:"水电", Amount:100},
{Expense:"汽车", Amount:450},
{Expense:"煤气", Amount:100},
{Expense:"饮食", Amount:1200}
]);
]]>
</mx:Script>
<mx:Panel title="圆饼型图表">
<!-- 创建 PieChart 图表 -->
<mx:PieChart id="myChart" dataProvider="{expenses}" showDataTips="true">
<mx:series>
<mx:PieSeries field="Amount" nameField="Expense" />
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
六、混合型图表ColumnChart
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
// 创建数组，用于 ColumnChart 图表数据源
[Bindable]
public var SMITH:Array = [
{date:"2008-08-22", point:45.87},
{date:"2008-08-23", point:45.74},
{date:"2008-08-24", point:45.77},
{date:"2008-08-25", point:46.06},
];
// 创建数组，用于 LineChart 图表数据源
[Bindable]
public var DECKER:Array = [
{date:"2008-08-22", point:45.59},
{date:"2008-08-23", point:45.3},
{date:"2008-08-24", point:46.71},
{date:"2008-08-25", point:46.88},
];
]]>
</mx:Script>
<mx:Panel title="混合型图表" width="400" height="400">
<!-- 创建 ColumnChart 图表 -->
<mx:ColumnChart id="mychart"
dataProvider="{SMITH}"
showDataTips="true"
height="250"
width="350"
>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="date"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis minimum="40" maximum="50"/>
</mx:verticalAxis>
<mx:series>
<mx:ColumnSeries
dataProvider="{SMITH}"
xField="date"
yField="point"
displayName="SMITH"
>
</mx:ColumnSeries>
<mx:LineSeries
dataProvider="{DECKER}"
xField="date"
yField="point"
displayName="DECKER"
>
</mx:LineSeries>
</mx:series>
</mx:ColumnChart>
</mx:Panel>
</mx:Application>
