Flex中如何给列状图ColumnChart添加中间填充(stroke around)单元的例子

By Minidxer | December 17, 2008

接下来的例子演示了Flex中如何给列状图ColumnChart添加中间填充(stroke around)单元。

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


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

Download: main.mxml
  1. <?xml version="1.0"?>
  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 currencyFormatter.format(item);
  13.             }
  14.  
  15.             private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String {
  16.                 var datNum:Number = Date.parse(item);
  17.                 var tempDate:Date = new Date(datNum);
  18.                 return dateFormatter.format(tempDate).toUpperCase();
  19.             }
  20.         ]]>
  21.     </mx:Script>
  22.  
  23.     <mx:DateFormatter id="dateFormatter" formatString="DD" />
  24.     <mx:CurrencyFormatter id="currencyFormatter" precision="2" />
  25.  
  26.     <mx:XMLListCollection id="dp">
  27.         <mx:source>
  28.             <mx:XMLList>
  29.                 <quote date="8/1/2007" open="40.29" close="39.58" />
  30.                 <quote date="8/2/2007" open="39.4" close="39.52" />
  31.                 <quote date="8/3/2007" open="39.47" close="38.75" />
  32.                 <quote date="8/6/2007" open="38.71" close="39.38" />
  33.                 <quote date="8/7/2007" open="39.08" close="39.42" />
  34.                 <quote date="8/8/2007" open="39.61" close="40.23" />
  35.                 <quote date="8/9/2007" open="39.9" close="40.75" />
  36.                 <quote date="8/10/2007" open="41.3" close="41.06" />
  37.                 <quote date="8/13/2007" open="41" close="40.83" />
  38.                 <quote date="8/14/2007" open="41.01" close="40.41" />
  39.                 <quote date="8/15/2007" open="40.22" close="40.18" />
  40.                 <quote date="8/16/2007" open="39.83" close="39.96" />
  41.                 <quote date="8/17/2007" open="40.18" close="40.32" />
  42.                 <quote date="8/20/2007" open="40.55" close="40.74" />
  43.                 <quote date="8/21/2007" open="40.41" close="40.13" />
  44.                 <quote date="8/22/2007" open="40.4" close="40.77" />
  45.                 <quote date="8/23/2007" open="40.82" close="40.6" />
  46.                 <quote date="8/24/2007" open="40.5" close="40.41" />
  47.                 <quote date="8/27/2007" open="40.38" close="40.81" />
  48.             </mx:XMLList>
  49.         </mx:source>
  50.     </mx:XMLListCollection>
  51.  
  52.     <mx:ColumnChart id="columnChart"
  53.             showDataTips="true"
  54.             dataProvider="{dp}"
  55.             width="100%"
  56.             height="100%">
  57.  
  58.         <mx:backgroundElements>
  59.             <mx:GridLines>
  60.                 <mx:horizontalStroke>
  61.                     <mx:Stroke color="haloSilver" weight="0" />
  62.                 </mx:horizontalStroke>
  63.             </mx:GridLines>
  64.         </mx:backgroundElements>
  65.  
  66.         <!-- vertical axis -->
  67.         <mx:verticalAxis>
  68.             <mx:LinearAxis baseAtZero="false"
  69.                     labelFunction="linearAxis_labelFunc" />
  70.         </mx:verticalAxis>
  71.  
  72.         <!-- horizontal axis -->
  73.         <mx:horizontalAxis>
  74.             <mx:CategoryAxis id="ca"
  75.                     categoryField="@date"
  76.                     title="August 2007"
  77.                     labelFunction="categoryAxis_labelFunc" />
  78.         </mx:horizontalAxis>
  79.  
  80.         <!-- horizontal axis renderer -->
  81.  
  82.         <mx:horizontalAxisRenderers>
  83.             <mx:AxisRenderer axis="{ca}"
  84.                     canDropLabels="true" />
  85.         </mx:horizontalAxisRenderers>
  86.  
  87.         <!-- series -->
  88.         <mx:series>
  89.             <mx:ColumnSeries displayName="Open"
  90.                     xField="@date"
  91.                     yField="@open">
  92.                 <mx:stroke>
  93.                     <mx:Stroke color="black" weight="2" alpha="1.0" />
  94.                 </mx:stroke>
  95.                 <mx:fill>
  96.                     <mx:SolidColor color="haloBlue" alpha="0.9" />
  97.                 </mx:fill>
  98.             </mx:ColumnSeries>
  99.         </mx:series>
  100.  
  101.         <!-- series filters -->
  102.         <mx:seriesFilters>
  103.             <mx:Array />
  104.         </mx:seriesFilters>
  105.     </mx:ColumnChart>
  106.  
  107. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Chart | No Comments » | Tags: , , ,

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll