Flex中如何通过columnWidthRatio样式设置ColumnChart列图宽度的例子

By Minidxer | December 21, 2008

接下来的例子演示了Flex中如何通过columnWidthRatio样式，设置ColumnChart列图宽度。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.charts.chartClasses.IAxis;
  10.  
  11.             private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
  12.                 return numberFormatter.format(item);
  13.             }
  14.         ]]>
  15.     </mx:Script>
  16.  
  17.     <mx:NumberFormatter id="numberFormatter" precision="3" />
  18.  
  19.     <mx:ArrayCollection id="arrColl">
  20.         <mx:source>
  21.             <mx:Array>
  22.                 <mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
  23.                 <mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
  24.                 <mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
  25.                 <mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
  26.                 <mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
  27.             </mx:Array>
  28.         </mx:source>
  29.     </mx:ArrayCollection>
  30.  
  31.     <mx:ApplicationControlBar dock="true">
  32.         <mx:Label text="columnWidthRatio:" />
  33.         <mx:HSlider id="slider"
  34.                 minimum="0.1"
  35.                 maximum="0.9"
  36.                 value="0.1"
  37.                 liveDragging="true"
  38.                 snapInterval="0.1"
  39.                 tickInterval="0.1" />
  40.     </mx:ApplicationControlBar>
  41.  
  42.     <mx:ColumnChart id="columnChart"
  43.             showDataTips="true"
  44.             dataProvider="{arrColl}"
  45.             columnWidthRatio="{slider.value}"
  46.             width="100%"
  47.             height="100%">
  48.  
  49.         <mx:horizontalAxis>
  50.             <mx:CategoryAxis id="ca"
  51.                     categoryField="name" />
  52.         </mx:horizontalAxis>
  53.  
  54.         <mx:verticalAxis>
  55.             <mx:LinearAxis baseAtZero="false"
  56.                     minimum="0.200"
  57.                     maximum="0.310"
  58.                     labelFunction="linearAxis_labelFunc" />
  59.         </mx:verticalAxis>
  60.  
  61.         <mx:horizontalAxisRenderers>
  62.             <mx:AxisRenderer axis="{ca}"
  63.                     canDropLabels="false" />
  64.         </mx:horizontalAxisRenderers>
  65.  
  66.         <mx:series>
  67.             <mx:ColumnSeries id="columnSeries"
  68.                     xField="name"
  69.                     yField="avg"
  70.                     displayName="avg" />
  71.         </mx:series>
  72.  
  73.         <mx:seriesFilters>
  74.             <mx:Array />
  75.         </mx:seriesFilters>
  76.  
  77.     </mx:ColumnChart>
  78.  
  79. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Chart | No Comments » | Tags: ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll