折线图 是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轴 数据来源 例如
xField:横轴 X轴 数据来源 例如
interpolateValues:如果值为true 则表格上缺少的数据会连续显示,如果为false,缺少的数据会断开
form:表格显示的形式 请看图片 有以下值 :A.segment (默认值) B.step C. vertical D.horizontal E.reverseStep F.curve
使用 <mx:lineStroke> 标签改变线的样式
例如
除了使用MX标签也可以使用actionscript 来改写样式 例如
关于 更多的样式的改变 请参考这里 http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7c65.html
默认的情况下的 线是有阴影的,可以通过 seriesFilters 属性 把array 设置为空 去掉阴影 请看下面例子
也可以通过 设置 自定义样式 例如 myLineChart.seriesFilters = [ ];
具体请看 如何使用 LineRenderer
以下例子针对某个系列数据做不同的线的阴影,例如 第三条线有阴影
把图表竖过来,x y 转置
设置LineSeries的 sortOnXField 属性 为 false
通过 修改 mx LegendItem的命名空间 来修改 mx:Legend 字体大小,
http://blog.flexexamples.com/2010/02/23/setting-the-font-weight-on-the-mx-legend-control-in-flex-4/
代码如下
使用图表控件
Flex 图表控件可以创建一些最常用的图表类型,并且自定义其表现形式。图表控件在 mx.charts.* 包中。
下表列出了提供 Flex 提供的图表类型、控件类名以及用来定义每个图表的数据表示的序列类名。
所有的图表控件,除了 PieChart 类之外,都是 CartesianChart 类的子类。 笛卡尔图表( Cartesian Chart )专门用来在矩形和二维空间表示数据点集。 PieChart 类是 PolarChart 类的子类,它表示圆形区域的数据。
所有的图表控件都继承自 ChartBase 类的基本图形特征。
在 MXML 中,图表控件通常具有以下结构:
下表描述了图表部件的更多细节:
对于每个图表类型, Flex 提供相应的的图表控件和图表序列。图表控件定义图表的类型、数据源、框格线、轴文本以及一些其他的属性。图表控件的数据源( dataProvider )属性确定了图表使用的数据。数据源是一个包含若干对象的集合,它可以使对象的数组( Array )或者其它继承了集合 API 的对象。数据源也可以是带有 XML 节点的 XMLList 对象,如 E4X 的查询结果。
图表组件使用平面或基于列表的数据源,类似一维数组。数据源能够包含字符串、数字,甚至是其他的一些对象。
使用图表序列指定数据源中的哪些数据需要在图表上面显示。数据源可以包含一些需要显示在数据图表上之外的一些数据,所以需要使用图表序列来指定数据源中需要的点。可以指定一个单独的数据序列,或者第二个序列。可以使用图表序列定义数据在图表上面的表现形式。
所有的图表序列都继承了图表的数据源,除非它们有明确的数据源集。若要设置图标控件的 dataProvider 属性,不必在序列之上设置属性值。当然,也可以为图表控件中的每一个序列定义不同的数据源。
例如,创建一个饼图,就用带 PieSeries 图表序列的 PieChart 控件。要创建面图,就用带 AreaSeries 图表序列的 AreaChart 控件,示例如下:
此例中,定义了一个包含于 标签的数组。 标签指定了要在图表中展示的单独数据序列。
可以添加第二个 标签,以显示第二个数据序列,示例如下:
并不一定在图表控件上定义数据源。每个序列可以有他自己的数据源,如下所示:
Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE MicrosoftInternetExplorer4 要实现动态地改变图表的大小以使用浏览器窗口,需要将 width 和 height 属性值设为百分比数值,如下所示:
如果希望在窗口大小变化时改变图表的大小,要使用百分比数值设置图表的父容器的大小。
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:horizontalAxis>
- <mx:CategoryAxis categoryField="month"/>
- </mx:horizontalAxis>
- <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">
- <mx:lineStroke>
- <mx:SolidColorStroke
- color="0x0044EB"
- weight="20"
- alpha=".8"/>
- </mx:lineStroke>
- </mx:LineSeries>
- </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 设置为空 去掉阴影 请看下面例子
- <?xml version="1.0"?>
- <!-- charts/LineChartNoShadows.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 No Shadows">
- <s:layout>
- <s:VerticalLayout/>
- </s:layout>
- <mx:LineChart id="myChart"
- dataProvider="{srv.lastResult.data.result}"
- showDataTips="true">
- <mx:seriesFilters>
- <fx:Array/> //这里设置为空数组
- </mx:seriesFilters>
- <mx:horizontalAxis>
- <mx:CategoryAxis categoryField="month"/>
- </mx:horizontalAxis>
- <mx:series>
- <mx:LineSeries
- yField="profit"
- displayName="Profit"/>
- <mx:LineSeries
- yField="expenses"
- displayName="Expenses"/>
- <mx:LineSeries
- yField="amount"
- displayName="Amount"/>
- </mx:series>
- </mx:LineChart>
- <mx:Legend dataProvider="{myChart}"/>
- </s:Panel>
- </s:Application>
也可以通过 设置 自定义样式 例如 myLineChart.seriesFilters = [ ];
具体请看 如何使用 LineRenderer
以下例子针对某个系列数据做不同的线的阴影,例如 第三条线有阴影
- <?xml version="1.0"?>
- <!-- charts/LineChartOneShadow.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 One Shadow">
- <s:layout>
- <s:VerticalLayout/>
- </s:layout>
- <mx:LineChart id="myChart"
- dataProvider="{srv.lastResult.data.result}"
- showDataTips="true">
- <mx:seriesFilters>
- <fx:Array/>
- </mx:seriesFilters>
- <mx:horizontalAxis>
- <mx:CategoryAxis categoryField="month"/>
- </mx:horizontalAxis>
- <mx:series>
- <mx:LineSeries yField="profit" displayName="Profit"/>
- <mx:LineSeries yField="expenses" displayName="Expenses"/>
- <mx:LineSeries yField="amount"
- displayName="Amount"
- lineSegmentRenderer="mx.charts.renderers.ShadowLineRenderer"/>
- </mx:series>
- </mx:LineChart>
- <mx:Legend dataProvider="{myChart}"/>
- </s:Panel>
- </s:Application>
把图表竖过来,x y 转置
设置LineSeries的 sortOnXField 属性 为 false
- <?xml version="1.0"?>
- <!-- charts/VerticalLineChart.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="Vertical Line Chart">
- <s:layout>
- <s:HorizontalLayout/>
- </s:layout>
- <mx:LineChart id="myChart"
- dataProvider="{srv.lastResult.data.result}"
- showDataTips="true">
- <mx:verticalAxis>
- <mx:CategoryAxis categoryField="month"/>
- </mx:verticalAxis>
- <mx:series>
- <mx:LineSeries
- xField="profit"
- yField="month"
- displayName="Profit"
- sortOnXField="false"/>
- <mx:LineSeries
- xField="expenses"
- yField="month"
- displayName="Expenses"
- sortOnXField="false"/>
- </mx:series>
- </mx:LineChart>
- <mx:Legend dataProvider="{myChart}"/>
- </s:Panel>
- </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 提供的图表类型、控件类名以及用来定义每个图表的数据表示的序列类名。
图表类型 | 图表控件类 | 图表序列类 |
Area | AreaChart | AreaSeries |
Bar | BarChart | BarSeries |
Bubble | BubbleChart | BubbleSeries |
Candlestick | CandlestickChart | CandlestickSeries |
Column | ColunmChart | ColumnSeries |
HighLowOpenClose | HLOCChart | HLOCseries |
Line | LineChart | LineSeries |
Pie | PieCahrt | PieSeries |
Plot | PlotChart | PlotSeries |
所有的图表控件,除了 PieChart 类之外,都是 CartesianChart 类的子类。 笛卡尔图表( Cartesian Chart )专门用来在矩形和二维空间表示数据点集。 PieChart 类是 PolarChart 类的子类,它表示圆形区域的数据。
所有的图表控件都继承自 ChartBase 类的基本图形特征。
在 MXML 中,图表控件通常具有以下结构:
- <mx:ChartName>
- <!-- 定义一个或多个序列 -->
- <mx:SeriesName/>
- <!-- 定义水平轴与竖直轴 -->
- <mx:horizontalAxis>
- <mx:axis_type/>
- </mx:horizontalAxis>
- <mx:verticalAxis>
- <mx:axis_type/>
- </mx:verticalAxis>
- <!-- 定义样式 -->
- <mx:horizontalAxisRenderers>
- <mx:AxisRenderer/>
- </mx:horizontalAxisRenderers>
- <mx:verticalAxisRenderers>
- <mx:AxisRenderer/>
- </mx:verticalAxisRenderers/>
- <!-- 添加框格线盒其它元素 -->
- <mx:annotationElements>
- <mx:Array/>
- </mx:annotationElements>
- <mx:backgroundElements>
- <mx:Array/>
- </mx:backgroundElements/>
- </mx:ChartName>
- <!-- 定义图例(可选) -->
- <mx:Legend/>
下表描述了图表部件的更多细节:
部件 | 描述 |
Chart | (必需)为图表定义一个或两个数据源。定义图表类型和数据提示、鼠标敏感度、gutter 样式、axis 样式 |
Series | (必需)为图表的展示定义一个或两个数据序列。设置数据序列的线条、填充、渲染以及每个序列图示的线条和填充。 也可以为每个图表定义第二个序列集合,从而在单个图表上展示多重数据序列。 图表中的每个序列可以有其自己的数据源。 |
Axes | 设置轴类型(数字或分类)。定义轴标签、标题和样式。 |
Axes renderer | (可选)设置设置样式、标签的可用性,定义轴线、标签角度和间距。 |
Elements | (可选)定义框格线以及一些额外元素以表现在图表上。 |
对于每个图表类型, Flex 提供相应的的图表控件和图表序列。图表控件定义图表的类型、数据源、框格线、轴文本以及一些其他的属性。图表控件的数据源( dataProvider )属性确定了图表使用的数据。数据源是一个包含若干对象的集合,它可以使对象的数组( Array )或者其它继承了集合 API 的对象。数据源也可以是带有 XML 节点的 XMLList 对象,如 E4X 的查询结果。
图表组件使用平面或基于列表的数据源,类似一维数组。数据源能够包含字符串、数字,甚至是其他的一些对象。
使用图表序列指定数据源中的哪些数据需要在图表上面显示。数据源可以包含一些需要显示在数据图表上之外的一些数据,所以需要使用图表序列来指定数据源中需要的点。可以指定一个单独的数据序列,或者第二个序列。可以使用图表序列定义数据在图表上面的表现形式。
所有的图表序列都继承了图表的数据源,除非它们有明确的数据源集。若要设置图标控件的 dataProvider 属性,不必在序列之上设置属性值。当然,也可以为图表控件中的每一个序列定义不同的数据源。
例如,创建一个饼图,就用带 PieSeries 图表序列的 PieChart 控件。要创建面图,就用带 AreaSeries 图表序列的 AreaChart 控件,示例如下:
- <?xml version="1.0"?>
- <!-- 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},
- {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>
此例中,定义了一个包含于 标签的数组。 标签指定了要在图表中展示的单独数据序列。
可以添加第二个 标签,以显示第二个数据序列,示例如下:
- <?xml version="1.0"?>
- <!-- charts/BasicArea.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"
- creationComplete="srv.send()">
- <fx:Declarations>
- <mx:HTTPService id="srv"
- url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
- </fx:Declarations>
- <mx:Panel title="Area Chart">
- <mx:AreaChart id="myChart" showDataTips="true"
- dataProvider="{srv.lastResult.data.result}">
- <mx:horizontalAxis>
- <mx:CategoryAxis
- categoryField="month"
- displayName="Month"/>
- </mx:horizontalAxis>
- <mx:series>
- <mx:AreaSeries
- yField="profit"
- displayName="Profit"/>
- <mx:AreaSeries
- yField="expenses"
- displayName="Expenses"/>
- </mx:series>
- </mx:AreaChart>
- <mx:Legend dataProvider="{myChart}"/>
- </mx:Panel>
- </mx:Application>
并不一定在图表控件上定义数据源。每个序列可以有他自己的数据源,如下所示:
- <?xml version="1.0"?>
- <!-- charts/MultipleDataProviders.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 profit04:ArrayCollection = new ArrayCollection([
- {Month:"Jan", Profit:2000},
- {Month:"Feb", Profit:1000},
- {Month:"Mar", Profit:1500}
- ]);
- [Bindable]
- public var profit05:ArrayCollection = new ArrayCollection([
- {Month:"Jan", Profit:2200},
- {Month:"Feb", Profit:1200},
- {Month:"Mar", Profit:1700}
- ]);
- [Bindable]
- public var profit06:ArrayCollection = new ArrayCollection([
- {Month:"Jan", Profit:2400},
- {Month:"Feb", Profit:1400},
- {Month:"Mar", Profit:1900}
- ]);
- ]]>
- </fx:Script>
- <mx:Panel title="Column Chart">
- <mx:ColumnChart id="myChart"
- dataProvider="{profit04}" showDataTips="true">
- <mx:horizontalAxis>
- <mx:CategoryAxis categoryField="Month"/>
- </mx:horizontalAxis>
- <mx:series>
- <mx:ColumnSeries
- dataProvider="{profit04}"
- yField="Profit"
- xField="Month"
- displayName="2004"/>
- <mx:ColumnSeries
- dataProvider="{profit05}"
- yField="Profit"
- xField="Month"
- displayName="2005"/>
- <mx:ColumnSeries
- dataProvider="{profit06}"
- yField="Profit"
- xField="Month"
- displayName="2006"/>
- </mx:series>
- </mx:ColumnChart>
- <mx:Legend dataProvider="{myChart}"/>
- </mx:Panel>
- </mx:Application>
Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE MicrosoftInternetExplorer4 要实现动态地改变图表的大小以使用浏览器窗口,需要将 width 和 height 属性值设为百分比数值,如下所示:
- <?xml version="1.0"?>
- <!-- charts/BasicBarSize.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},
- {Month:"Feb", Profit:1000, Expenses:200},
- {Month:"Mar", Profit:1500, Expenses:500}
- ]);
- ]]>
- </fx:Script>
- <mx:Panel title="Bar Chart" height="500" width="500">
- <mx:BarChart id="myChart"
- dataProvider="{expenses}"
- height="100%"
- width="100%"
- showDataTips="true">
- <mx:verticalAxis>
- <mx:CategoryAxis
- dataProvider="{expenses}"
- categoryField="Month"/>
- </mx:verticalAxis>
- <mx:series>
- <mx:BarSeries
- yField="Month"
- xField="Profit"
- displayName="Profit"/>
- <mx:BarSeries
- yField="Month"
- xField="Expenses"
- displayName="Expenses"/>
- </mx:series>
- </mx:BarChart>
- <mx:Legend dataProvider="{myChart}"/>
- </mx:Panel>
- </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。 |
如果希望在窗口大小变化时改变图表的大小,要使用百分比数值设置图表的父容器的大小。