Flex中如何给列图ColumnChart的数据项添加不同颜色以及标签的例子

By Minidxer | December 21, 2008

接下来的例子演示了Flex中如何给列图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.ChartItem;
  10.             import mx.charts.HitData;
  11.             import mx.charts.chartClasses.IAxis;
  12.             import mx.charts.chartClasses.Series;
  13.             import mx.charts.series.ColumnSet;
  14.             import mx.charts.series.items.ColumnSeriesItem;
  15.             import mx.utils.StringUtil;
  16.  
  17.             private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
  18.                 return numberFormatter.format(item);
  19.             }
  20.  
  21.             private function columnChart_dataTipFunc(item:HitData):String {
  22.                 var cSI:ColumnSeriesItem = item.chartItem as ColumnSeriesItem;
  23.                 var col:String = ColumnSeries(item.element).yField;
  24.                 return StringUtil.substitute("<b>{0}</b><br>{1}: {2}", cSI.item.name, col, numberFormatter.format(cSI.item[col]));
  25.             }
  26.  
  27.             private function columnSeries_labelFunc(chartItem:ChartItem, series:Series):String {
  28.                 var col:String = ColumnSeries(chartItem.element).yField;
  29.                 return numberFormatter.format(chartItem.item[col]);
  30.             }
  31.         ]]>
  32.     </mx:Script>
  33.  
  34.     <mx:NumberFormatter id="numberFormatter" precision="3" />
  35.  
  36.     <mx:Array id="arr">
  37.         <mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
  38.         <mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
  39.         <mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
  40.         <mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
  41.         <mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
  42.     </mx:Array>
  43.  
  44.     <mx:ApplicationControlBar dock="true">
  45.         <mx:Legend dataProvider="{columnChart}" direction="horizontal" />
  46.     </mx:ApplicationControlBar>
  47.  
  48.     <mx:ColumnChart id="columnChart"
  49.             showDataTips="true"
  50.             dataProvider="{arr}"
  51.             dataTipFunction="columnChart_dataTipFunc"
  52.             columnWidthRatio="0.9"
  53.             type="stacked"
  54.             width="100%"
  55.             height="100%">
  56.  
  57.         <mx:horizontalAxis>
  58.             <mx:CategoryAxis id="ca" categoryField="name" />
  59.         </mx:horizontalAxis>
  60.  
  61.         <mx:verticalAxis>
  62.             <mx:LinearAxis labelFunction="linearAxis_labelFunc" />
  63.         </mx:verticalAxis>
  64.  
  65.         <mx:horizontalAxisRenderers>
  66.             <mx:AxisRenderer axis="{ca}" />
  67.         </mx:horizontalAxisRenderers>
  68.  
  69.         <mx:series>
  70.             <mx:ColumnSeries id="avgSeries"
  71.                     xField="name"
  72.                     yField="avg"
  73.                     displayName="Batting Average (AVG)"
  74.                     labelPosition="inside"
  75.                     labelFunction="columnSeries_labelFunc" />
  76.  
  77.             <mx:ColumnSeries id="obpSeries"
  78.                     xField="name"
  79.                     yField="obp"
  80.                     displayName="On-base Percentage (OBP)"
  81.                     labelPosition="inside"
  82.                     labelFunction="columnSeries_labelFunc" />
  83.  
  84.             <mx:ColumnSeries id="slgSeries"
  85.                     xField="name"
  86.                     yField="slg"
  87.                     displayName="Slugging Percentage (SLG)"
  88.                     labelPosition="inside"
  89.                     labelFunction="columnSeries_labelFunc" />
  90.         </mx:series>
  91.  
  92.         <mx:seriesFilters>
  93.             <mx:Array />
  94.         </mx:seriesFilters>
  95.  
  96.     </mx:ColumnChart>
  97.  
  98. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll