Flex中如何通过itemRollOverColor和itemSelectionColor样式给列图ColumnChart设置选中/未选颜色的例子

By Minidxer | December 20, 2008

接下来的例子演示了Flex中如何通过itemRollOverColor和itemSelectionColor样式，给列图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:ColumnChart id="columnChart"
  32.             showDataTips="true"
  33.              dataProvider="{arrColl}"
  34.              selectionMode="single"
  35.              itemRollOverColor="haloSilver"
  36.              itemSelectionColor="haloBlue"
  37.              width="100%"
  38.              height="100%">
  39.  
  40.         <mx:horizontalAxis>
  41.             <mx:CategoryAxis id="ca"
  42.                     categoryField="name" />
  43.         </mx:horizontalAxis>
  44.  
  45.         <mx:verticalAxis>
  46.             <mx:LinearAxis baseAtZero="false"
  47.                     minimum="0.200"
  48.                     maximum="0.310"
  49.                     labelFunction="linearAxis_labelFunc" />
  50.         </mx:verticalAxis>
  51.  
  52.         <mx:horizontalAxisRenderers>
  53.             <mx:AxisRenderer axis="{ca}"
  54.                     canDropLabels="false" />
  55.         </mx:horizontalAxisRenderers>
  56.  
  57.         <mx:series>
  58.             <mx:ColumnSeries id="columnSeries"
  59.                     xField="name"
  60.                     yField="avg"
  61.                     displayName="avg" />
  62.         </mx:series>
  63.  
  64.         <mx:seriesFilters>
  65.             <mx:Array />
  66.         </mx:seriesFilters>
  67.  
  68.     </mx:ColumnChart>
  69.  
  70. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll