Programmation Flex/Utilisation des composants/Charts
Programmation_Flex |
---|
Sommaire |
Liens |
Modifier ce modèle |
Area chart
modifier<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var expensesAC:ArrayCollection = new ArrayCollection( [
{ Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
{ Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
{ Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
{ Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
{ Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
]]>
</mx:Script>
<mx:Panel title="AreaChart Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="600" height="240"
paddingTop="10" paddingRight="5" paddingBottom="10" paddingLeft="5" horizontalAlign="center">
<mx:AreaChart id="Areachart" color="0x323232" height="100%" showDataTips="true" dataProvider="{expensesAC}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month"/>
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries yField="Profit" form="curve" displayName="Profit"/>
<mx:AreaSeries yField="Expenses" form="curve" displayName="Expenses"/>
<mx:AreaSeries yField="Amount" form="curve" displayName="Amount"/>
</mx:series>
</mx:AreaChart>
<mx:Legend dataProvider="{Areachart}" color="0x323232"/>
</mx:Panel>
</mx:WindowedApplication>
- Ce graphique a trois courbes dans les séries - Profit, Expenses, Amount
- AreaChart a le tableau {expensesAC} en point d'entrée du dataProvider
BarChart
modifier<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var medalsAC:ArrayCollection = new ArrayCollection( [
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
]]>
</mx:Script>
<mx:Panel title="BarChart Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="600" height="240"
paddingTop="10" paddingRight="5" paddingBottom="10" paddingLeft="5" horizontalAlign="center">
<mx:BarChart id="bar" height="100%" color="0x323232"
showDataTips="true" dataProvider="{medalsAC}">
<mx:verticalAxis>
<mx:CategoryAxis categoryField="Country"/>
</mx:verticalAxis>
<mx:series>
<mx:BarSeries yField="Country" xField="Gold" displayName="Gold"/>
<mx:BarSeries yField="Country" xField="Silver" displayName="Silver"/>
<mx:BarSeries yField="Country" xField="Bronze" displayName="Bronze"/>
</mx:series>
</mx:BarChart>
<mx:Legend dataProvider="{bar}" color="0x323232"/>
</mx:Panel>
</mx:WindowedApplication>
- En dataprovider on a le tableau medalsAC
- En barSeries on a 3 données par groupe Country (axe des Y), soit Gold - Silver - Bronze (axe des x)
BubbleChart
modifier<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var expensesAC:ArrayCollection = new ArrayCollection( [
{ Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
{ Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
{ Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
{ Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
{ Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
]]>
</mx:Script>
<mx:Style>
BubbleChart { color:#000099; }
</mx:Style>
<mx:Panel title="BubbleChart Control" layout="vertical" color="0xffffff" borderAlpha="0.15" width="600" height="240"
paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
<mx:BubbleChart id="bubblechart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232"
showDataTips="true" maxRadius="20" dataProvider="{expensesAC}">
<mx:series>
<mx:BubbleSeries displayName="Profit/Expenses/Amount"
xField="Profit" yField="Expenses" radiusField="Amount"/>
</mx:series>
</mx:BubbleChart>
<mx:Legend dataProvider="{bubblechart}" color="0x323232"/>
</mx:Panel>
</mx:WindowedApplication>
- dataProvider="{expensesAC}" le tableau déclaré dans le mx:script
- en X : le "profit", en y : "Expenses", le rayon de la bulle est "Amount"
CandlestickChart
modifier<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var expensesAC:ArrayCollection = new ArrayCollection( [
{ Date: "25-Jul", Open: 40.75, High: 40.75, Low: 40.24, Close:40.31},
{ Date: "26-Jul", Open: 39.98, High: 40.78, Low: 39.97, Close:40.34},
{ Date: "27-Jul", Open: 40.38, High: 40.66, Low: 40, Close:40.63},
{ Date: "28-Jul", Open: 40.49, High: 40.99, Low: 40.3, Close:40.98},
{ Date: "29-Jul", Open: 40.13, High: 40.4, Low: 39.65, Close:39.95},
{ Date: "1-Aug", Open: 39.00, High: 39.50, Low: 38.7, Close:38.6},
{ Date: "2-Aug", Open: 38.68, High: 39.34, Low: 37.75, Close:38.84},
{ Date: "3-Aug", Open: 38.76, High: 38.76, Low: 38.03, Close:38.12},
{ Date: "4-Aug", Open: 37.98, High: 37.98, Low: 36.56, Close:36.69},
{ Date: "5-Aug", Open: 36.61, High: 37, Low: 36.48, Close:36.86} ]);
]]>
</mx:Script>
<mx:Panel title="CandlestickChart Control" layout="vertical" color="0xffffff" borderAlpha="0.15" width="600" height="240"
paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
<mx:CandlestickChart id="candlestickchart" height="100%" width="100%" paddingRight="5" paddingLeft="5"
color="0x323232" showDataTips="true" dataProvider="{expensesAC}">
<mx:verticalAxis>
<mx:LinearAxis baseAtZero="false" />
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Date" title="Date"/>
</mx:horizontalAxis>
<mx:series>
<mx:CandlestickSeries openField="Open" highField="High"
lowField="Low" closeField="Close"/>
</mx:series>
</mx:CandlestickChart>
</mx:Panel>
</mx:WindowedApplication>
- dataProvider="{expensesAC}" du tableau du mx:script en entrée
- en X (axe horizontal) on a la categoryField "Date"
- en Y (axe vertical) on a des unités données par flex
- les chandelles ont 4 champs : "Open", "High", "Low", "Close"
ColumnChart
modifier<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var medalsAC:ArrayCollection = new ArrayCollection( [
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
]]>
</mx:Script>
<mx:Panel title="ColumnChart Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="600" height="240"
paddingTop="10" paddingRight="5" paddingBottom="10" paddingLeft="5" horizontalAlign="center">
<mx:ColumnChart id="column" height="100%" color="0x323232"
showDataTips="true" dataProvider="{medalsAC}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Country"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries xField="Country" yField="Gold" displayName="Gold"/>
<mx:ColumnSeries xField="Country" yField="Silver" displayName="Silver"/>
<mx:ColumnSeries xField="Country" yField="Bronze" displayName="Bronze"/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{column}" color="0x323232"/>
</mx:Panel>
</mx:WindowedApplication>
- dataProvider="{medalsAC}" du tableau sous mx:script
- groupage en X : "Country"
- les champs par "Country" : Gold, Silver, Bronze
- en Y, on a les valeurs assignées par flex
HLOCChart
modifier<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var stockDataAC:ArrayCollection = new ArrayCollection( [
{ Date: "25-Jul", Open: 40.55, High: 40.75, Low: 40.24, Close:40.31},
{ Date: "26-Jul", Open: 40.15, High: 40.78, Low: 39.97, Close:40.34},
{ Date: "27-Jul", Open: 40.38, High: 40.66, Low: 40, Close:40.63},
{ Date: "28-Jul", Open: 40.49, High: 40.99, Low: 40.3, Close:40.98},
{ Date: "29-Jul", Open: 40.13, High: 40.4, Low: 39.65, Close:39.95},
{ Date: "1-Aug", Open: 39.00, High: 39.50, Low: 38.7, Close:38.6},
{ Date: "2-Aug", Open: 38.68, High: 39.34, Low: 37.75, Close:38.84},
{ Date: "3-Aug", Open: 38.76, High: 38.76, Low: 38.03, Close:38.12},
{ Date: "4-Aug", Open: 37.98, High: 37.98, Low: 36.56, Close:36.69},
{ Date: "5-Aug", Open: 36.61, High: 37, Low: 36.48, Close:36.86} ]);
]]>
</mx:Script>
<mx:Panel title="HLOCChart Control" layout="vertical" color="0xffffff" borderAlpha="0.15" width="600" height="240"
paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
<mx:HLOCChart id="hlocchart" height="100%" width="100%" paddingRight="5" paddingLeft="5"
color="0x323232" showDataTips="true" dataProvider="{stockDataAC}">
<mx:verticalAxis>
<mx:LinearAxis baseAtZero="false" />
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Date" title="Date" />
</mx:horizontalAxis>
<mx:series>
<mx:HLOCSeries openField="Open" highField="High"
lowField="Low" closeField="Close"/>
</mx:series>
</mx:HLOCChart>
</mx:Panel>
</mx:WindowedApplication>
- dataProvider="{stockDataAC}" en entrée un tableau sous mx:script
- en X (horizontal) les "Date"
- en Y les valeurs assignées par flex
- les 4 champs de HLOCSeries sont : "Open", "High", "Low", "Close"
LineChart
modifier<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var expensesAC:ArrayCollection = new ArrayCollection( [
{ Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
{ Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
{ Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
{ Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
{ Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
]]>
</mx:Script>
<mx:Panel title="LineChart Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="600" height="240"
paddingTop="10" paddingRight="5" paddingBottom="10" paddingLeft="5" horizontalAlign="center">
<mx:LineChart id="linechart" color="0x323232" height="100%"
showDataTips="true" dataProvider="{expensesAC}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries yField="Profit" form="curve" displayName="Profit"/>
<mx:LineSeries yField="Expenses" form="curve" displayName="Expenses"/>
<mx:LineSeries yField="Amount" form="curve" displayName="Amount"/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{linechart}" color="0x323232"/>
</mx:Panel>
</mx:WindowedApplication>
- dataProvider="{expensesAC}" le tableau sous mx:script
- en X : le "Month"
- 3 séries : "Profit", "Expenses", "Amount"
PieChart
modifier
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var medalsAC:ArrayCollection = new ArrayCollection( [
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
var temp:String= (" " + percentValue).substr(0,6);
return data.Country + ": " + '\n' + "Total Gold: " + data.Gold + '\n' + temp + "%";
}
]]>
</mx:Script>
<mx:Panel title="PieChart Control" layout="vertical" color="0xffffff" borderAlpha="0.15" height="240"
paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
<mx:PieChart id="chart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232"
showDataTips="true" dataProvider="{medalsAC}" >
<mx:series>
<mx:PieSeries labelPosition="callout" field="Gold" labelFunction="displayGold">
<mx:calloutStroke>
<mx:Stroke weight="0" color="0x888888" alpha="1.0"/>
</mx:calloutStroke>
<mx:radialStroke>
<mx:Stroke weight="0" color="#FFFFFF" alpha="0.20"/>
</mx:radialStroke>
<mx:stroke>
<mx:Stroke color="0" alpha="0.20" weight="2"/>
</mx:stroke>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
</mx:Panel>
</mx:WindowedApplication>
- dataProvider="{medalsAC}" du tableau sous mx:script
- le field en part de tarte est "Gold"
- le label ou indications externe est faite par la fonction displayGold
PlotChart
modifier<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var expensesAC:ArrayCollection = new ArrayCollection( [
{ Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
{ Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
{ Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 } ]);
]]>
</mx:Script>
<mx:Panel title="PlotChart Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="600" height="240"
paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
<mx:PlotChart id="plot" height="100%" paddingLeft="5" paddingRight="5" color="0x323232"
showDataTips="true" dataProvider="{expensesAC}">
<mx:series>
<mx:PlotSeries xField="Expenses" yField="Profit" displayName="Expenses/Profit"/>
<mx:PlotSeries xField="Amount" yField="Expenses" displayName="Amount/Expenses"/>
<mx:PlotSeries xField="Profit" yField="Amount" displayName="Profit/Amount"/>
</mx:series>
</mx:PlotChart>
<mx:Legend dataProvider="{plot}" color="0x323232"/>
</mx:Panel>
</mx:WindowedApplication>
- dataProvider="{expensesAC}" du tableau sous mx:script
- trois rapports : Expenses/Profit en X et Y , Amount/Expenses en X et Y, Profit/Amount en X et Y