折线图 是flex里面 最常用的图标之一， 这次flashbuilder4 中集成了 折线图 line chart 组件 请看 官方文档
http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7c5c.html
而且这次该组件已经放置在了?mx.charts?包中 不再?mx.controls?里面。
http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/mx/charts/LineChart.html
改变样式
http://www.cnblogs.com/Fooo/archive/2009/10/22/1587791.html
坐标轴 AxisRenderer 设定?
http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/mx/charts/AxisRenderer.html
注意 如果想旋转标注 必须嵌入字体才可以?http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf65816-7fe5.html
LineSeries?的属性?
http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/mx/charts/series/LineSeries.html
yField：纵轴,Y轴 数据来源?例如
?
复制代码
- ??? ??? <mx:series>
- ??? ??? ??? <mx:LineSeries displayName="城市" yField="caiavgprice" id="lineSeries"/>
- ??? ??? </mx:series>
xField：横轴 X轴 数据来源?例如
复制代码
????????<mx:horizontalAxis>
????????????<mx:CategoryAxis id="categoryAxis" categoryField="caiavgpricetime"/>
????????</mx:horizontalAxis>
interpolateValues：如果值为true 则表格上缺少的数据会连续显示，如果为false，缺少的数据会断开
form：表格显示的形式 请看图片 有以下值
：A.segment (默认值)??
B.step??
C.?vertical????
D.horizontal????
E.reverseStep???
F.curve
使用?<mx:lineStroke> 标签改变线的样式
例如
复制代码
<?xml version="1.0"?>
<!-- charts/BasicLineStroke.mxml -->
<s:Application
????xmlns:fx="http://ns.adobe.com/mxml/2009"
????xmlns:mx="library://ns.adobe.com/flex/mx"
????xmlns:s="library://ns.adobe.com/flex/spark"
????creationComplete="srv.send()"
????height="600">
????<fx:Declarations>
????????<!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
????????<mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
????????<!-- To see data in an HTML table,go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->??
????</fx:Declarations>
????<s:layout>
????????<s:VerticalLayout/>
????</s:layout>
??<s:Panel title="Line Chart With SolidColorStrokes">
????????<s:layout>
????????????<s:VerticalLayout/>
????????</s:layout>
???? <mx:LineChart id="myChart"
????????dataProvider="{srv.lastResult.data.result}"
????????showDataTips="true">
?????????? <mx:CategoryAxis categoryField="month"/>
????????<mx:series>
?????????? <mx:LineSeries yField="profit" displayName="Profit">
????????????<mx:lineStroke>
????????????????<mx:SolidColorStroke
????????????????????color="0x0099FF"
????????????????????weight="20"
????????????????????alpha=".2"/>
????????????</mx:lineStroke>????????????????
?????????? </mx:LineSeries>
?????????? <mx:LineSeries yField="expenses" displayName="Expenses">
????????????????????color="0x0044EB"
????????????????????alpha=".8"/>
????????</mx:series>
???? </mx:LineChart>
???? <mx:Legend dataProvider="{myChart}"/>
??</s:Panel>
</s:Application>
除了使用MX标签也可以使用actionscript 来改写样式?例如
复制代码
/* First 3 arguments are color,weight,and alpha. */
var s1:SolidColorStroke = new SolidColorStroke(0x0099FF,20,.2);
series1.setStyle("lineStroke",s1);
关于 更多的样式的改变 请参考这里?
http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7c65.html
默认的情况下的 线是有阴影的，可以通过??seriesFilters
?属性 把array 设置为空 去掉阴影?请看下面例子
复制代码
<!-- charts/LineChartNoShadows.mxml -->
??<s:Panel title="Line Chart with No Shadows">
????????<mx:seriesFilters>
?????????? <fx:Array/>??//这里设置为空数组
????????</mx:seriesFilters>
?????????? <mx:LineSeries
????????????????yField="profit"
????????????????displayName="Profit"/>
????????????????yField="expenses"
????????????????displayName="Expenses"/>
????????????????yField="amount"
????????????????displayName="Amount"/>
</s:Application>
也可以通过 设置 自定义样式 例如 myLineChart.seriesFilters = [ ];
具体请看 如何使用?
LineRenderer
以下例子针对某个系列数据做不同的线的阴影，例如 第三条线有阴影
复制代码
<!-- charts/LineChartOneShadow.mxml -->
????
??<s:Panel title="Line Chart with One Shadow">
????????
?????????? <fx:Array/>
?????????? <mx:LineSeries yField="profit" displayName="Profit"/>
?????????? <mx:LineSeries yField="expenses" displayName="Expenses"/>
?????????? <mx:LineSeries yField="amount"
????????????????displayName="Amount"
????????????????lineSegmentRenderer="mx.charts.renderers.ShadowLineRenderer"/>
</s:Application>
把图表竖过来，x y 转置
设置LineSeries的 sortOnXField 属性 为 false
复制代码
<!-- charts/VerticalLineChart.mxml -->
??<s:Panel title="Vertical Line Chart">
???? <s:layout>
???????? <s:HorizontalLayout/>
???? </s:layout>
????????<mx:verticalAxis>
????????</mx:verticalAxis>
????????????????xField="profit"
????????????????yField="month"
????????????????displayName="Profit"
????????????????sortOnXField="false"/>
????????????????xField="expenses"
????????????????displayName="Expenses"
</s:Application>
通过 修改 mx LegendItem的命名空间? 来修改 mx:Legend 字体大小，
http://blog.flexexamples.com/2010/02/23/setting-the-font-weight-on-the-mx-legend-control-in-flex-4/
代码如下
复制代码
??? <fx:Style>
??? ??? @namespace s "library://ns.adobe.com/flex/spark";
??? ??? @namespace mx "library://ns.adobe.com/flex/mx";
??? ??? mx|LegendItem {
??? ??? ??? fontWeight: bold;
??? ??? ??? fontSize:16;
??? ??? }
??? </fx:Style>
使用图表控件?
Flex 图表控件可以创建一些最常用的图表类型，并且自定义其表现形式。图表控件在 mx.charts.* 包中。
下表列出了提供 Flex 提供的图表类型、控件类名以及用来定义每个图表的数据表示的序列类名。
所有的图表控件，除了 PieChart 类之外，都是 CartesianChart 类的子类。 笛卡尔图表（ Cartesian Chart ）专门用来在矩形和二维空间表示数据点集。 PieChart 类是 PolarChart 类的子类，它表示圆形区域的数据。
所有的图表控件都继承自 ChartBase 类的基本图形特征。
在 MXML 中，图表控件通常具有以下结构：
复制代码
<mx:ChartName>
? ? <!-- 定义一个或多个序列 -->
? ? <mx:SeriesName/>
? ? <!-- 定义水平轴与竖直轴 -->
? ? <mx:horizontalAxis>
? ? ? ? <mx:axis_type/>
? ? </mx:horizontalAxis>
? ? <mx:verticalAxis>
? ? </mx:verticalAxis>
? ? <!-- 定义样式 -->
? ? <mx:horizontalAxisRenderers>
? ? ? ? <mx:AxisRenderer/>
? ? </mx:horizontalAxisRenderers>
? ? <mx:verticalAxisRenderers>
? ? </mx:verticalAxisRenderers/>
? ? <!-- 添加框格线盒其它元素 -->
? ? <mx:annotationElements>
? ? ? ? <mx:Array/>
? ? </mx:annotationElements>
? ? <mx:backgroundElements>
? ? </mx:backgroundElements/>
? ?</mx:ChartName>
? ?<!-- 定义图例（可选） -->
<mx:Legend/>
下表描述了图表部件的更多细节：
对于每个图表类型， Flex 提供相应的的图表控件和图表序列。图表控件定义图表的类型、数据源、框格线、轴文本以及一些其他的属性。图表控件的数据源（ dataProvider ）属性确定了图表使用的数据。数据源是一个包含若干对象的集合，它可以使对象的数组（ Array ）或者其它继承了集合 API 的对象。数据源也可以是带有 XML 节点的 XMLList 对象，如 E4X 的查询结果。
图表组件使用平面或基于列表的数据源，类似一维数组。数据源能够包含字符串、数字，甚至是其他的一些对象。
使用图表序列指定数据源中的哪些数据需要在图表上面显示。数据源可以包含一些需要显示在数据图表上之外的一些数据，所以需要使用图表序列来指定数据源中需要的点。可以指定一个单独的数据序列，或者第二个序列。可以使用图表序列定义数据在图表上面的表现形式。
所有的图表序列都继承了图表的数据源，除非它们有明确的数据源集。若要设置图标控件的 dataProvider 属性，不必在序列之上设置属性值。当然，也可以为图表控件中的每一个序列定义不同的数据源。
例如，创建一个饼图，就用带 PieSeries 图表序列的 PieChart 控件。要创建面图，就用带 AreaSeries 图表序列的 AreaChart 控件，示例如下：
复制代码
<!-- charts/BasicAreaOneSeries.mxml -->
<!-- http://www.slsay.com/archives/153 -->
<mx:Application
? ? ? ?xmlns:fx="http://ns.adobe.com/mxml/2009"
? ? ? ?xmlns:mx="library://ns.adobe.com/flex/halo"
? ? ? ?xmlns:s="library://ns.adobe.com/flex/spark">
? ? <fx:Script>
? ? ? ? <![CDATA[
? ? ? ? ? ?import mx.collections.ArrayCollection;
? ? ? ? ? ?[Bindable]
? ? ? ? ? ?public var expenses:ArrayCollection = new ArrayCollection([
? ? ? ? ? ? ? ?{Month:"Jan",Profit:2000,Expenses:1500,Amount:450},
? ? ? ? ? ? ? ?{Month:"Feb",Profit:1000,Expenses:200,Amount:600},247); font-size:12px"> ? ? ? ? ? ? ? ?{Month:"Mar",Profit:1500,Expenses:500,Amount:300}
? ? ? ? ? ?]);
? ? ? ?]]>
? ? </fx:Script>
? ? <mx:Panel title="Area Chart">
? ? ? ? <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="Profit"/>
? ? ? ? ? ? </mx:series>
? ? ? ? </mx:AreaChart>
? ? ? ? <mx:Legend dataProvider="{myChart}"/>
? ? </mx:Panel>
</mx:Application>
此例中，定义了一个包含于??标签的数组。??标签指定了要在图表中展示的单独数据序列。
可以添加第二个??标签，以显示第二个数据序列，示例如下：
复制代码
<!-- charts/BasicArea.mxml -->
? ? ? ?xmlns:s="library://ns.adobe.com/flex/spark"
? ? ? ?creationComplete="srv.send()">
? ? <fx:Declarations>
? ? ? ? <mx:HTTPService id="srv"
url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
? ? </fx:Declarations>
? ? ? ? <mx:AreaChart id="myChart" showDataTips="true"
? ? ? ? ? ? ? ?dataProvider="{srv.lastResult.data.result}">
? ? ? ? ? ? ? ? ? ? ? ?categoryField="month"
? ? ? ? ? ? ? ? ? ? ? ?displayName="Month"/>
? ? ? ? ? ? ? ? ? ? ? ?yField="profit"
? ? ? ? ? ? ? ? ? ? ? ?yField="expenses"
? ? ? ? ? ? ? ? ? ? ? ?displayName="Expenses"/>
</mx:Application>
并不一定在图表控件上定义数据源。每个序列可以有他自己的数据源，如下所示：
复制代码
<!-- charts/MultipleDataProviders.mxml -->
? ? ? ? ? ?public var profit04:ArrayCollection = new ArrayCollection([
? ? ? ? ? ?public var profit05:ArrayCollection = new ArrayCollection([
? ? ? ? ? ?public var profit06:ArrayCollection = new ArrayCollection([
? ? <mx:Panel title="Column Chart">
? ? ? ? <mx:ColumnChart id="myChart"
? ? ? ? ? ? ? ? dataProvider="{profit04}" showDataTips="true">? ? ? ? ? ? ?
? ? ? ? ? ? ? ? <mx:CategoryAxis categoryField="Month"/>
? ? ? ? ? ? ? ? <mx:ColumnSeries
? ? ? ? ? ? ? ? ? ? ? ?dataProvider="{profit04}"
? ? ? ? ? ? ? ? ? ? ? ?xField="Month"
? ? ? ? ? ? ? ? ? ? ? ?displayName="2004"/>
? ? ? ? ? ? ? ? ? ? ? ?dataProvider="{profit05}"
? ? ? ? ? ? ? ? ? ? ? ?displayName="2005"/>
? ? ? ? ? ? ? ? ? ? ? ?dataProvider="{profit06}"
? ? ? ? ? ? ? ? ? ? ? ?displayName="2006"/>
? ? ? ? </mx:ColumnChart>
?? Normal??0????????7.8 磅??0??2????false??false??false????EN-US??ZH-CN??X-NONE??????????????????????????????????????????????????????MicrosoftInternetExplorer4???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? 要实现动态地改变图表的大小以使用浏览器窗口，需要将 width 和 height 属性值设为百分比数值，如下所示：
复制代码
<!-- charts/BasicBarSize.mxml -->
? ? ? ? ? ? ]);
? ? <mx:Panel title="Bar Chart" height="500" width="500">
? ? ? ? <mx:BarChart id="myChart"
? ? ? ? ? ? ? ?dataProvider="{expenses}"
? ? ? ? ? ? ? ?height="100%"
? ? ? ? ? ? ? ?width="100%"
? ? ? ? ? ? <mx:verticalAxis>
? ? ? ? ? ? ? ? ? ?dataProvider="{expenses}"
? ? ? ? ? ? ? ? ? ?categoryField="Month"/>
? ? ? ? ? ? </mx:verticalAxis>
? ? ? ? ? ? ? ? <mx:BarSeries
? ? ? ? ? ? ? ? ? ? ? ?yField="Month"
? ? ? ? ? ? ? ? ? ? ? ?xField="Profit"
? ? ? ? ? ? ? ? ? ? ? ?xField="Expenses"
? ? ? ? </mx:BarChart>
</mx:Application>
mx.charts.renderers 类：
| ? |
类 |
说明 |
| ? |
AreaRenderer |
用于呈现 AreaSeries 对象的数据点下方区域的默认类。 |
| ? |
BoxItemRenderer |
用于填充矩形区域的简单图表 itemRenderer 实现。 |
| ? |
CandlestickItemRenderer |
CandlestickSeries 对象的默认 itemRenderer。 |
| ? |
CircleItemRenderer |
用于填充椭圆区域的简单图表 itemRenderer 实现。 |
| ? |
CrossItemRenderer |
用于在其分配区域中进行交叉填充的简单图表 itemRenderer 实现。 |
| ? |
DiamondItemRenderer |
用于填充其分配区域中菱形的简单图表 itemRenderer 实现。 |
| ? |
HLOCItemRenderer |
HLOCSeries 对象的默认项目渲染器。 |
| ? |
LineRenderer |
供 LineSeries 对象使用的线段渲染器的简单实现。 |
| ? |
ShadowBoxItemRenderer |
用于填充矩形区域并在其周围添加阴影的简单图表 itemRenderer 实现。 |
| ? |
ShadowLineRenderer |
供 LineSeries 对象使用的线段渲染器实现。 |
| ? |
TriangleItemRenderer |
用于填充其分配区域中直角三角形的简单图表 itemRenderer 实现。 |
| ? |
WedgeItemRenderer |
PieSeries 对象的默认 itemRenderer。 |
From:
http://www.fbair.net/bbs/read.php?tid=155
如果希望在窗口大小变化时改变图表的大小，要使用百分比数值设置图表的父容器的大小。
