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>