flex 折线图 line chart 图表 Legend 修改字体大小 AxisRenderer 坐标轴
来源:互联网 发布:c语言判断数字 编辑:程序博客网 时间:2024/06/05 03:40
折线图 是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 提供的图表类型、控件类名以及用来定义每个图表的数据表示的序列类名。
图表类型图表控件类图表序列类AreaAreaChartAreaSeriesBarBarChartBarSeriesBubbleBubbleChartBubbleSeriesCandlestickCandlestickChartCandlestickSeriesColumnColunmChartColumnSeriesHighLowOpenCloseHLOCChartHLOCseriesLineLineChartLineSeriesPiePieCahrtPieSeriesPlotPlotChartPlotSeries
所有的图表控件,除了 PieChart 类之外,都是 CartesianChart 类的子类。 笛卡尔图表( Cartesian Chart )专门用来在矩形和二维空间表示数据点集。 PieChart 类是 PolarChart 类的子类,它表示圆形区域的数据。
所有的图表控件都继承自 ChartBase 类的基本图形特征。
在 MXML 中,图表控件通常具有以下结构:
下表描述了图表部件的更多细节:
部件描述Chart(必需)为图表定义一个或两个数据源。定义图表类型和数据提示、鼠标敏感度、gutter 样式、axis 样式Series(必需)为图表的展示定义一个或两个数据序列。设置数据序列的线条、填充、渲染以及每个序列图示的线条和填充。 也可以为每个图表定义第二个序列集合,从而在单个图表上展示多重数据序列。
图表中的每个序列可以有其自己的数据源。
Axes设置轴类型(数字或分类)。定义轴标签、标题和样式。Axes renderer(可选)设置设置样式、标签的可用性,定义轴线、标签角度和间距。Elements(可选)定义框格线以及一些额外元素以表现在图表上。
对于每个图表类型, 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 属性值设为百分比数值,如下所示:
类 说明 AreaRenderer用于呈现 AreaSeries 对象的数据点下方区域的默认类。 BoxItemRenderer用于填充矩形区域的简单图表 itemRenderer 实现。 CandlestickItemRendererCandlestickSeries 对象的默认 itemRenderer。 CircleItemRenderer用于填充椭圆区域的简单图表 itemRenderer 实现。 CrossItemRenderer用于在其分配区域中进行交叉填充的简单图表 itemRenderer 实现。 DiamondItemRenderer用于填充其分配区域中菱形的简单图表 itemRenderer 实现。 HLOCItemRendererHLOCSeries 对象的默认项目渲染器。 LineRenderer供 LineSeries 对象使用的线段渲染器的简单实现。 ShadowBoxItemRenderer用于填充矩形区域并在其周围添加阴影的简单图表 itemRenderer 实现。 ShadowLineRenderer供 LineSeries 对象使用的线段渲染器实现。 TriangleItemRenderer用于填充其分配区域中直角三角形的简单图表 itemRenderer 实现。 WedgeItemRendererPieSeries 对象的默认 itemRenderer。
如果希望在窗口大小变化时改变图表的大小,要使用百分比数值设置图表的父容器的大小。
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 提供的图表类型、控件类名以及用来定义每个图表的数据表示的序列类名。
图表类型图表控件类图表序列类AreaAreaChartAreaSeriesBarBarChartBarSeriesBubbleBubbleChartBubbleSeriesCandlestickCandlestickChartCandlestickSeriesColumnColunmChartColumnSeriesHighLowOpenCloseHLOCChartHLOCseriesLineLineChartLineSeriesPiePieCahrtPieSeriesPlotPlotChartPlotSeries
所有的图表控件,除了 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 类:
From:http://www.fbair.net/bbs/read.php?tid=155
如果希望在窗口大小变化时改变图表的大小,要使用百分比数值设置图表的父容器的大小。
- flex 折线图 line chart 图表 Legend 修改字体大小 AxisRenderer 坐标轴
- Flex 4 Chart Legend
- Flex 折线图LineChart, 坐标轴偏移
- 修改flex chart中Legend的字体样式
- 修改flex chart中Legend的字体样式
- 修改Flex chart中Legend的字体样式
- Flex chart设置Legend样式
- flex图表坐标轴样式设置
- Android绘制line chart的过程(折线图)
- 折线图(一)绘制折线图坐标轴
- Extjs学习 图表Chart 坐标轴组件详解(axes)
- 图表篇——Xml To Chart (折线图3D)
- 图表篇——Xml To Chart (多序列柱状图3D,折线图3D)
- 用D3.js进行医疗数据可视化 (一)折线图 (Line Chart)
- Spotfire使用经验-为折线图(line chart)添加平均线作为基准线
- flex中chart(图表)知识总结
- Mac Excel 次坐标轴/双坐标轴/柱状图+折线图
- extjs4.2中的图表 line sery折线图跨过某些点的方法
- 总线的理解
- 子页面 通过 JS 操作 父页面的内容
- 开源电子商务OFBIZ:商品价格
- 技术网址
- Winxp/Win2003/linux下的mysql的root密码丢失不再愁!
- flex 折线图 line chart 图表 Legend 修改字体大小 AxisRenderer 坐标轴
- MFC修改程序框架
- U-Boot工作过程
- 关于安装 ASP.NET 4.0(install ASP.NET for the .NET Framework 4.0)
- 汇编note
- C++虚函数 纯虚函数 与多态的模糊解释
- 迭代器模式(python)
- iphone 游戏开发 失败经验 总结
- MFC绘图