论坛风格切换切换到宽版
  • 21581阅读
  • 1回复

flex 折线图 line chart  图表 Legend 修改字体大小 AxisRenderer 坐标轴 [复制链接]

上一主题 下一主题
 

发帖
1077
只看楼主 倒序阅读 使用道具 楼主  发表于: 2010-07-13
折线图 是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轴 数据来源 例如
 
  1.         <mx:series>
  2.             <mx:LineSeries displayName="城市" yField="caiavgprice" id="lineSeries"/>
  3.         </mx:series>


xField:横轴 X轴 数据来源 例如
  1.         <mx:horizontalAxis>
  2.             <mx:CategoryAxis id="categoryAxis" categoryField="caiavgpricetime"/>
  3.         </mx:horizontalAxis>


interpolateValues:如果值为true 则表格上缺少的数据会连续显示,如果为false,缺少的数据会断开

form:表格显示的形式 请看图片 有以下值A.segment (默认值)  B.step  C. vertical    D.horizontal    E.reverseStep   F.curve



使用 <mx:lineStroke> 标签改变线的样式
例如
  1. <?xml version="1.0"?>
  2. <!-- charts/BasicLineStroke.mxml -->
  3. <s:Application
  4.     xmlns:fx="http://ns.adobe.com/mxml/2009"
  5.     xmlns:mx="library://ns.adobe.com/flex/mx"
  6.     xmlns:s="library://ns.adobe.com/flex/spark"
  7.     creationComplete="srv.send()"
  8.     height="600">
  9.     <fx:Declarations>
  10.         <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
  11.         <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
  12.         <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
  13.     </fx:Declarations>
  14.     <s:layout>
  15.         <s:VerticalLayout/>
  16.     </s:layout>
  17.   <s:Panel title="Line Chart With SolidColorStrokes">
  18.         <s:layout>
  19.             <s:VerticalLayout/>
  20.         </s:layout>
  21.      <mx:LineChart id="myChart"
  22.         dataProvider="{srv.lastResult.data.result}"
  23.         showDataTips="true">
  24.         <mx:horizontalAxis>
  25.            <mx:CategoryAxis categoryField="month"/>
  26.         </mx:horizontalAxis>
  27.         <mx:series>
  28.            <mx:LineSeries yField="profit" displayName="Profit">
  29.             <mx:lineStroke>
  30.                 <mx:SolidColorStroke
  31.                     color="0x0099FF"
  32.                     weight="20"
  33.                     alpha=".2"/>
  34.             </mx:lineStroke>                
  35.            </mx:LineSeries>
  36.            <mx:LineSeries yField="expenses" displayName="Expenses">
  37.             <mx:lineStroke>
  38.                 <mx:SolidColorStroke
  39.                     color="0x0044EB"
  40.                     weight="20"
  41.                     alpha=".8"/>
  42.             </mx:lineStroke>                
  43.            </mx:LineSeries>
  44.         </mx:series>
  45.      </mx:LineChart>
  46.      <mx:Legend dataProvider="{myChart}"/>
  47.   </s:Panel>
  48. </s:Application>




除了使用MX标签也可以使用actionscript 来改写样式 例如
  1. /* First 3 arguments are color, weight, and alpha. */
  2. var s1:SolidColorStroke = new SolidColorStroke(0x0099FF,20,.2);
  3. series1.setStyle("lineStroke", s1);

关于 更多的样式的改变 请参考这里 http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7c65.html


默认的情况下的 线是有阴影的,可以通过  seriesFilters 属性 把array 设置为空 去掉阴影 请看下面例子
  1. <?xml version="1.0"?>
  2. <!-- charts/LineChartNoShadows.mxml -->
  3. <s:Application
  4.     xmlns:fx="http://ns.adobe.com/mxml/2009"
  5.     xmlns:mx="library://ns.adobe.com/flex/mx"
  6.     xmlns:s="library://ns.adobe.com/flex/spark"
  7.     creationComplete="srv.send()"
  8.     height="600">
  9.     <fx:Declarations>
  10.         <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
  11.         <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
  12.         <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
  13.     </fx:Declarations>
  14.     <s:layout>
  15.         <s:VerticalLayout/>
  16.     </s:layout>
  17.   <s:Panel title="Line Chart with No Shadows">
  18.         <s:layout>
  19.             <s:VerticalLayout/>
  20.         </s:layout>
  21.      <mx:LineChart id="myChart"
  22.         dataProvider="{srv.lastResult.data.result}"
  23.         showDataTips="true">
  24.         <mx:seriesFilters>
  25.            <fx:Array/>  //这里设置为空数组
  26.         </mx:seriesFilters>
  27.         <mx:horizontalAxis>
  28.            <mx:CategoryAxis categoryField="month"/>
  29.         </mx:horizontalAxis>
  30.         <mx:series>
  31.            <mx:LineSeries
  32.                 yField="profit"
  33.                 displayName="Profit"/>
  34.            <mx:LineSeries
  35.                 yField="expenses"
  36.                 displayName="Expenses"/>
  37.            <mx:LineSeries
  38.                 yField="amount"
  39.                 displayName="Amount"/>
  40.         </mx:series>
  41.      </mx:LineChart>
  42.      <mx:Legend dataProvider="{myChart}"/>
  43.   </s:Panel>
  44. </s:Application>



也可以通过 设置 自定义样式 例如 myLineChart.seriesFilters = [ ];
具体请看 如何使用 LineRenderer

以下例子针对某个系列数据做不同的线的阴影,例如 第三条线有阴影

  1. <?xml version="1.0"?>
  2. <!-- charts/LineChartOneShadow.mxml -->
  3. <s:Application
  4.     xmlns:fx="http://ns.adobe.com/mxml/2009"
  5.     xmlns:mx="library://ns.adobe.com/flex/mx"
  6.     xmlns:s="library://ns.adobe.com/flex/spark"
  7.     creationComplete="srv.send()"
  8.     height="600">
  9.     
  10.     <fx:Declarations>
  11.         <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
  12.         <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
  13.         <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
  14.     </fx:Declarations>
  15.     <s:layout>
  16.         <s:VerticalLayout/>
  17.     </s:layout>
  18.   <s:Panel title="Line Chart with One Shadow">
  19.         <s:layout>
  20.             <s:VerticalLayout/>
  21.         </s:layout>
  22.      <mx:LineChart id="myChart"
  23.         dataProvider="{srv.lastResult.data.result}"
  24.         showDataTips="true">
  25.         
  26.         <mx:seriesFilters>
  27.            <fx:Array/>
  28.         </mx:seriesFilters>
  29.         
  30.         <mx:horizontalAxis>
  31.            <mx:CategoryAxis categoryField="month"/>
  32.         </mx:horizontalAxis>
  33.         
  34.         <mx:series>
  35.            <mx:LineSeries yField="profit" displayName="Profit"/>
  36.            <mx:LineSeries yField="expenses" displayName="Expenses"/>
  37.            <mx:LineSeries yField="amount"
  38.                 displayName="Amount"
  39.                 lineSegmentRenderer="mx.charts.renderers.ShadowLineRenderer"/>
  40.         </mx:series>
  41.      </mx:LineChart>
  42.      <mx:Legend dataProvider="{myChart}"/>
  43.   </s:Panel>
  44. </s:Application>




把图表竖过来,x y 转置
设置LineSeries的 sortOnXField 属性 为 false

  1. <?xml version="1.0"?>
  2. <!-- charts/VerticalLineChart.mxml -->
  3. <s:Application
  4.     xmlns:fx="http://ns.adobe.com/mxml/2009"
  5.     xmlns:mx="library://ns.adobe.com/flex/mx"
  6.     xmlns:s="library://ns.adobe.com/flex/spark"
  7.     creationComplete="srv.send()"
  8.     height="600">
  9.     <fx:Declarations>
  10.         <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
  11.         <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
  12.         <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
  13.     </fx:Declarations>
  14.     <s:layout>
  15.         <s:VerticalLayout/>
  16.     </s:layout>
  17.   <s:Panel title="Vertical Line Chart">
  18.      <s:layout>
  19.          <s:HorizontalLayout/>
  20.      </s:layout>
  21.      <mx:LineChart id="myChart"
  22.         dataProvider="{srv.lastResult.data.result}"
  23.         showDataTips="true">
  24.         <mx:verticalAxis>
  25.            <mx:CategoryAxis categoryField="month"/>
  26.         </mx:verticalAxis>
  27.         <mx:series>
  28.            <mx:LineSeries
  29.                 xField="profit"
  30.                 yField="month"
  31.                 displayName="Profit"
  32.                 sortOnXField="false"/>
  33.            <mx:LineSeries
  34.                 xField="expenses"
  35.                 yField="month"
  36.                 displayName="Expenses"
  37.                 sortOnXField="false"/>
  38.         </mx:series>
  39.      </mx:LineChart>
  40.      <mx:Legend dataProvider="{myChart}"/>
  41.   </s:Panel>
  42. </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/
代码如下
  1.     <fx:Style>
  2.         @namespace s "library://ns.adobe.com/flex/spark";
  3.         @namespace mx "library://ns.adobe.com/flex/mx";
  4.         mx|LegendItem {
  5.             fontWeight: bold;
  6.             fontSize:16;
  7.         }
  8.     </fx:Style>







使用图表控件
Flex 图表控件可以创建一些最常用的图表类型,并且自定义其表现形式。图表控件在 mx.charts.* 包中。
下表列出了提供 Flex 提供的图表类型、控件类名以及用来定义每个图表的数据表示的序列类名。

图表类型图表控件类图表序列类
AreaAreaChartAreaSeries
BarBarChartBarSeries
BubbleBubbleChartBubbleSeries
CandlestickCandlestickChartCandlestickSeries
ColumnColunmChartColumnSeries
HighLowOpenCloseHLOCChartHLOCseries
LineLineChartLineSeries
PiePieCahrtPieSeries
PlotPlotChartPlotSeries


所有的图表控件,除了 PieChart 类之外,都是 CartesianChart 类的子类。 笛卡尔图表( Cartesian Chart )专门用来在矩形和二维空间表示数据点集。 PieChart 类是 PolarChart 类的子类,它表示圆形区域的数据。


所有的图表控件都继承自 ChartBase 类的基本图形特征。


在 MXML 中,图表控件通常具有以下结构:


  1. <mx:ChartName>
  2.     <!-- 定义一个或多个序列 -->
  3.     <mx:SeriesName/>
  4.     <!-- 定义水平轴与竖直轴 -->
  5.     <mx:horizontalAxis>
  6.         <mx:axis_type/>
  7.     </mx:horizontalAxis>
  8.     <mx:verticalAxis>
  9.         <mx:axis_type/>
  10.     </mx:verticalAxis>
  11.     <!-- 定义样式 -->
  12.     <mx:horizontalAxisRenderers>
  13.         <mx:AxisRenderer/>
  14.     </mx:horizontalAxisRenderers>
  15.     <mx:verticalAxisRenderers>
  16.         <mx:AxisRenderer/>
  17.     </mx:verticalAxisRenderers/>
  18.     <!-- 添加框格线盒其它元素 -->
  19.     <mx:annotationElements>
  20.         <mx:Array/>
  21.     </mx:annotationElements>
  22.     <mx:backgroundElements>
  23.         <mx:Array/>
  24.     </mx:backgroundElements/>
  25.    </mx:ChartName>
  26.    <!-- 定义图例(可选) -->
  27. <mx:Legend/>



下表描述了图表部件的更多细节:


部件描述
Chart(必需)为图表定义一个或两个数据源。定义图表类型和数据提示、鼠标敏感度、gutter 样式、axis 样式
Series(必需)为图表的展示定义一个或两个数据序列。设置数据序列的线条、填充、渲染以及每个序列图示的线条和填充。   也可以为每个图表定义第二个序列集合,从而在单个图表上展示多重数据序列。
图表中的每个序列可以有其自己的数据源。
Axes设置轴类型(数字或分类)。定义轴标签、标题和样式。
Axes renderer(可选)设置设置样式、标签的可用性,定义轴线、标签角度和间距。
Elements(可选)定义框格线以及一些额外元素以表现在图表上。


对于每个图表类型, Flex 提供相应的的图表控件和图表序列。图表控件定义图表的类型、数据源、框格线、轴文本以及一些其他的属性。图表控件的数据源( dataProvider )属性确定了图表使用的数据。数据源是一个包含若干对象的集合,它可以使对象的数组( Array )或者其它继承了集合 API 的对象。数据源也可以是带有 XML 节点的 XMLList 对象,如 E4X 的查询结果。


图表组件使用平面或基于列表的数据源,类似一维数组。数据源能够包含字符串、数字,甚至是其他的一些对象。
使用图表序列指定数据源中的哪些数据需要在图表上面显示。数据源可以包含一些需要显示在数据图表上之外的一些数据,所以需要使用图表序列来指定数据源中需要的点。可以指定一个单独的数据序列,或者第二个序列。可以使用图表序列定义数据在图表上面的表现形式。


所有的图表序列都继承了图表的数据源,除非它们有明确的数据源集。若要设置图标控件的 dataProvider 属性,不必在序列之上设置属性值。当然,也可以为图表控件中的每一个序列定义不同的数据源。


例如,创建一个饼图,就用带 PieSeries 图表序列的 PieChart 控件。要创建面图,就用带 AreaSeries 图表序列的 AreaChart 控件,示例如下:
  1. <?xml version="1.0"?>
  2. <!-- charts/BasicAreaOneSeries.mxml -->
  3. <!-- http://www.slsay.com/archives/153 -->
  4. <mx:Application
  5.        xmlns:fx="http://ns.adobe.com/mxml/2009"
  6.        xmlns:mx="library://ns.adobe.com/flex/halo"
  7.        xmlns:s="library://ns.adobe.com/flex/spark">
  8.     <fx:Script>
  9.         <![CDATA[
  10.            import mx.collections.ArrayCollection;
  11.            [Bindable]
  12.            public var expenses:ArrayCollection = new ArrayCollection([
  13.                {Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
  14.                {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
  15.                {Month:"Mar", Profit:1500, Expenses:500, Amount:300}
  16.            ]);
  17.        ]]>
  18.     </fx:Script>
  19.     <mx:Panel title="Area Chart">
  20.         <mx:AreaChart id="myChart" dataProvider="{expenses}"
  21.                showDataTips="true">
  22.             <mx:horizontalAxis>
  23.                 <mx:CategoryAxis
  24.                        dataProvider="{expenses}"
  25.                        categoryField="Month"/>
  26.             </mx:horizontalAxis>
  27.             <mx:series>
  28.                 <mx:AreaSeries
  29.                        yField="Profit"
  30.                        displayName="Profit"/>
  31.             </mx:series>
  32.         </mx:AreaChart>
  33.         <mx:Legend dataProvider="{myChart}"/>
  34.     </mx:Panel>
  35. </mx:Application>



此例中,定义了一个包含于  标签的数组。  标签指定了要在图表中展示的单独数据序列。


可以添加第二个  标签,以显示第二个数据序列,示例如下:
  1. <?xml version="1.0"?>
  2. <!-- charts/BasicArea.mxml -->
  3. <!-- http://www.slsay.com/archives/153 -->
  4. <mx:Application
  5.        xmlns:fx="http://ns.adobe.com/mxml/2009"
  6.        xmlns:mx="library://ns.adobe.com/flex/halo"
  7.        xmlns:s="library://ns.adobe.com/flex/spark"
  8.        creationComplete="srv.send()">
  9.     <fx:Declarations>
  10.         <mx:HTTPService id="srv"
  11. url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
  12.     </fx:Declarations>
  13.     <mx:Panel title="Area Chart">
  14.         <mx:AreaChart id="myChart" showDataTips="true"
  15.                dataProvider="{srv.lastResult.data.result}">
  16.             <mx:horizontalAxis>
  17.                 <mx:CategoryAxis
  18.                        categoryField="month"
  19.                        displayName="Month"/>
  20.             </mx:horizontalAxis>
  21.             <mx:series>
  22.                 <mx:AreaSeries
  23.                        yField="profit"
  24.                        displayName="Profit"/>
  25.                 <mx:AreaSeries
  26.                        yField="expenses"
  27.                        displayName="Expenses"/>
  28.             </mx:series>
  29.         </mx:AreaChart>
  30.         <mx:Legend dataProvider="{myChart}"/>
  31.     </mx:Panel>
  32. </mx:Application>



并不一定在图表控件上定义数据源。每个序列可以有他自己的数据源,如下所示:
  1. <?xml version="1.0"?>
  2. <!-- charts/MultipleDataProviders.mxml -->
  3. <!-- http://www.slsay.com/archives/153 -->
  4. <mx:Application
  5.        xmlns:fx="http://ns.adobe.com/mxml/2009"
  6.        xmlns:mx="library://ns.adobe.com/flex/halo"
  7.        xmlns:s="library://ns.adobe.com/flex/spark">
  8.     <fx:Script>
  9.         <![CDATA[
  10.            import mx.collections.ArrayCollection;
  11.            [Bindable]
  12.            public var profit04:ArrayCollection = new ArrayCollection([
  13.                {Month:"Jan", Profit:2000},
  14.                {Month:"Feb", Profit:1000},
  15.                {Month:"Mar", Profit:1500}
  16.            ]);
  17.            [Bindable]
  18.            public var profit05:ArrayCollection = new ArrayCollection([
  19.                {Month:"Jan", Profit:2200},
  20.                {Month:"Feb", Profit:1200},
  21.                {Month:"Mar", Profit:1700}
  22.            ]);
  23.            [Bindable]
  24.            public var profit06:ArrayCollection = new ArrayCollection([
  25.                {Month:"Jan", Profit:2400},
  26.                {Month:"Feb", Profit:1400},
  27.                {Month:"Mar", Profit:1900}
  28.            ]);
  29.        ]]>
  30.     </fx:Script>
  31.     <mx:Panel title="Column Chart">
  32.         <mx:ColumnChart id="myChart"
  33.                 dataProvider="{profit04}" showDataTips="true">             
  34.             <mx:horizontalAxis>
  35.                 <mx:CategoryAxis categoryField="Month"/>
  36.             </mx:horizontalAxis>
  37.             <mx:series>
  38.                 <mx:ColumnSeries
  39.                        dataProvider="{profit04}"
  40.                        yField="Profit"
  41.                        xField="Month"
  42.                        displayName="2004"/>
  43.                 <mx:ColumnSeries
  44.                        dataProvider="{profit05}"
  45.                        yField="Profit"
  46.                        xField="Month"
  47.                        displayName="2005"/>
  48.                 <mx:ColumnSeries
  49.                        dataProvider="{profit06}"
  50.                        yField="Profit"
  51.                        xField="Month"
  52.                        displayName="2006"/>
  53.             </mx:series>
  54.         </mx:ColumnChart>
  55.         <mx:Legend dataProvider="{myChart}"/>
  56.     </mx:Panel>
  57. </mx:Application>



   Normal  0        7.8 磅  0  2    false  false  false    EN-US  ZH-CN  X-NONE                                                      MicrosoftInternetExplorer4                                                                                                                                                                                                                                                                                                                         要实现动态地改变图表的大小以使用浏览器窗口,需要将 width 和 height 属性值设为百分比数值,如下所示:
  1. <?xml version="1.0"?>
  2. <!-- charts/BasicBarSize.mxml -->
  3. <!-- http://www.slsay.com/archives/153 -->
  4. <mx:Application
  5.        xmlns:fx="http://ns.adobe.com/mxml/2009"
  6.        xmlns:mx="library://ns.adobe.com/flex/halo"
  7.        xmlns:s="library://ns.adobe.com/flex/spark">
  8.     <fx:Script>
  9.         <![CDATA[
  10.            import mx.collections.ArrayCollection;
  11.            [Bindable]
  12.            public var expenses:ArrayCollection = new ArrayCollection([
  13.                {Month:"Jan", Profit:2000, Expenses:1500},
  14.                {Month:"Feb", Profit:1000, Expenses:200},
  15.                {Month:"Mar", Profit:1500, Expenses:500}
  16.             ]);
  17.        ]]>
  18.     </fx:Script>
  19.     <mx:Panel title="Bar Chart" height="500" width="500">
  20.         <mx:BarChart id="myChart"
  21.                dataProvider="{expenses}"
  22.                height="100%"
  23.                width="100%"
  24.                showDataTips="true">
  25.             <mx:verticalAxis>
  26.                 <mx:CategoryAxis
  27.                    dataProvider="{expenses}"
  28.                    categoryField="Month"/>
  29.             </mx:verticalAxis>
  30.             <mx:series>
  31.                 <mx:BarSeries
  32.                        yField="Month"
  33.                        xField="Profit"
  34.                        displayName="Profit"/>
  35.                 <mx:BarSeries
  36.                        yField="Month"
  37.                        xField="Expenses"
  38.                        displayName="Expenses"/>
  39.             </mx:series>
  40.         </mx:BarChart>
  41.         <mx:Legend dataProvider="{myChart}"/>
  42.     </mx:Panel>
  43. </mx:Application>

如果希望在窗口大小变化时改变图表的大小,要使用百分比数值设置图表的父容器的大小。
只看该作者 沙发  发表于: 2010-08-10
Re:flex 折线图 line chart  图表 Legend 修改字体大小 AxisRenderer 坐标轴
Flash4(ActionScript3.0)Flash4(ActionScript3.0)Flash4(ActionScript3.0)Flash4(ActionScript3.0)
快速回复
限100 字节
如果您在写长篇帖子又不马上发表,建议存为草稿
 
上一个 下一个