flex饼图
http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_09.html
PieSeries类属性:
field:指定数据域,以此饼图中每个扇区的数据。me:即大小。
nameField:指定数据域,用作提示数据和图例数据。
例 基本图表
<?xml version="1.0"?>
<!-- charts/BasicPie.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Expense:"Taxes", Amount:2000},
{Expense:"Rent", Amount:1000},
{Expense:"Bills", Amount:100},
{Expense:"Car", Amount:450},
{Expense:"Gas", Amount:100},
{Expense:"Food", Amount:200}
]);
]]></mx:Script>
<mx:Panel title="Pie Chart">
<mx:PieChart id="myChart"
dataProvider="{expenses}"
showDataTips="true"
>
<mx:series>
<mx:PieSeries
field="Amount"
nameField="Expense"
labelPosition="callout"
/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Expense:"Taxes", Amount:2000},
{Expense:"Rent", Amount:1000},
{Expense:"Bills", Amount:100},
{Expense:"Car", Amount:450},
{Expense:"Gas", Amount:100},
{Expense:"Food", Amount:200}
]);
]]></mx:Script>
<mx:Panel title="Pie Chart">
<mx:PieChart id="myChart"
dataProvider="{expenses}"
showDataTips="true"
>
<mx:series>
<mx:PieSeries
field="Amount"
nameField="Expense"
labelPosition="callout"
/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
例 自定义饼图填充色
<?xml version="1.0"?>
<!-- charts/PieFilling.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Expense:"Taxes", Amount:2000},
{Expense:"Rent", Amount:1000},
{Expense:"Bills", Amount:100},
{Expense:"Car", Amount:450},
{Expense:"Gas", Amount:100},
{Expense:"Food", Amount:200}
]);
]]></mx:Script>
<!-- Define custom colors for use as pie wedge fills. -->
<mx:SolidColor id="sc1" color="blue" alpha=".3"/>
<mx:SolidColor id="sc2" color="red" alpha=".3"/>
<mx:SolidColor id="sc3" color="green" alpha=".3"/>
<mx:SolidColor id="sc4" color="gray" alpha=".3"/>
<mx:SolidColor id="sc5" color="black" alpha=".3"/>
<mx:SolidColor id="sc6" color="yellow" alpha=".3"/>
<mx:Panel title="PieChart control with custom fills">
<mx:PieChart id="pie"
dataProvider="{expenses}"
showDataTips="true"
>
<mx:series>
<mx:PieSeries
field="Amount"
nameField="Expense"
labelPosition="callout"
fills="{[sc1, sc2, sc3, sc4, sc5, sc6]}"
/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{pie}"/>
</mx:Panel>
<!-- charts/PieFilling.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Expense:"Taxes", Amount:2000},
{Expense:"Rent", Amount:1000},
{Expense:"Bills", Amount:100},
{Expense:"Car", Amount:450},
{Expense:"Gas", Amount:100},
{Expense:"Food", Amount:200}
]);
]]></mx:Script>
<!-- Define custom colors for use as pie wedge fills. -->
<mx:SolidColor id="sc1" color="blue" alpha=".3"/>
<mx:SolidColor id="sc2" color="red" alpha=".3"/>
<mx:SolidColor id="sc3" color="green" alpha=".3"/>
<mx:SolidColor id="sc4" color="gray" alpha=".3"/>
<mx:SolidColor id="sc5" color="black" alpha=".3"/>
<mx:SolidColor id="sc6" color="yellow" alpha=".3"/>
<mx:Panel title="PieChart control with custom fills">
<mx:PieChart id="pie"
dataProvider="{expenses}"
showDataTips="true"
>
<mx:series>
<mx:PieSeries
field="Amount"
nameField="Expense"
labelPosition="callout"
fills="{[sc1, sc2, sc3, sc4, sc5, sc6]}"
/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{pie}"/>
</mx:Panel>
</mx:Application>
浙公网安备 33010602011771号