Flex中如何利用showLabelVertically属性控制ColumnChart上ColumnSeries标签为竖直或横向的例子

By Minidxer | March 6, 2009

接下来的例子演示了Flex中如何利用showLabelVertically属性，控制ColumnChart上ColumnSeries标签为竖直或横向

让我们先来看一下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:Style>
  8.         @font-face {
  9.             src: local("Arial");
  10.             fontFamily: ArialEmbedded;
  11.         }
  12.  
  13.         ColumnChart {
  14.             fontFamily: ArialEmbedded;
  15.         }
  16.     </mx:Style>
  17.  
  18.     <mx:Script>
  19.         <![CDATA[
  20.             import mx.charts.series.items.ColumnSeriesItem;
  21.             import mx.charts.ChartItem;
  22.             import mx.charts.chartClasses.Series;
  23.             import mx.charts.chartClasses.IAxis;
  24.             import mx.utils.ObjectUtil;
  25.  
  26.             private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
  27.                 return currencyFormatter.format(item);
  28.             }
  29.  
  30.             private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String {
  31.                 var datNum:Number = Date.parse(item);
  32.                 var tempDate:Date = new Date(datNum);
  33.                 return shortDateFormatter.format(tempDate).toUpperCase();
  34.             }
  35.  
  36.             private function columnSeries_labelFunc(element:ChartItem, series:Series):String {
  37.                 var csi:ColumnSeriesItem = ColumnSeriesItem(element);
  38.                 var ser:ColumnSeries = ColumnSeries(series);
  39.  
  40.                 var datNum:Number = Date.parse(csi.item.@date);
  41.                 var tempDate:Date = new Date(datNum);
  42.                 return fullDateFormatter.format(tempDate);
  43.             }
  44.         ]]>
  45.     </mx:Script>
  46.  
  47.     <mx:DateFormatter id="shortDateFormatter" formatString="DD" />
  48.     <mx:DateFormatter id="fullDateFormatter" formatString="MMM D, YYYY" />
  49.     <mx:CurrencyFormatter id="currencyFormatter" precision="2" />
  50.  
  51.     <mx:XMLListCollection id="dp">
  52.         <mx:source>
  53.             <mx:XMLList>
  54.                 <quote date="8/1/2007" open="40.29" close="39.58" />
  55.                 <quote date="8/2/2007" open="39.4" close="39.52" />
  56.                 <quote date="8/3/2007" open="39.47" close="38.75" />
  57.                 <quote date="8/6/2007" open="38.71" close="39.38" />
  58.                 <quote date="8/7/2007" open="39.08" close="39.42" />
  59.                 <quote date="8/8/2007" open="39.61" close="40.23" />
  60.                 <quote date="8/9/2007" open="39.9" close="40.75" />
  61.                 <quote date="8/10/2007" open="41.3" close="41.06" />
  62.                 <quote date="8/13/2007" open="41" close="40.83" />
  63.                 <quote date="8/14/2007" open="41.01" close="40.41" />
  64.                 <quote date="8/15/2007" open="40.22" close="40.18" />
  65.                 <quote date="8/16/2007" open="39.83" close="39.96" />
  66.                 <quote date="8/17/2007" open="40.18" close="40.32" />
  67.                 <quote date="8/20/2007" open="40.55" close="40.74" />
  68.                 <quote date="8/21/2007" open="40.41" close="40.13" />
  69.                 <quote date="8/22/2007" open="40.4" close="40.77" />
  70.                 <quote date="8/23/2007" open="40.82" close="40.6" />
  71.                 <quote date="8/24/2007" open="40.5" close="40.41" />
  72.                 <quote date="8/27/2007" open="40.38" close="40.81" />
  73.             </mx:XMLList>
  74.         </mx:source>
  75.     </mx:XMLListCollection>
  76.  
  77.     <mx:ApplicationControlBar dock="true">
  78.         <mx:CheckBox id="checkBox"
  79.                 label="showLabelVertically:"
  80.                 labelPlacement="left"
  81.                 selected="true" />
  82.     </mx:ApplicationControlBar>
  83.  
  84.     <mx:ColumnChart id="columnChart"
  85.             showDataTips="true"
  86.             dataProvider="{dp}"
  87.             width="100%"
  88.             height="100%"
  89.             showLabelVertically="{checkBox.selected}">
  90.  
  91.         <!-- vertical axis -->
  92.         <mx:verticalAxis>
  93.             <mx:LinearAxis baseAtZero="false"
  94.                     labelFunction="linearAxis_labelFunc" />
  95.         </mx:verticalAxis>
  96.  
  97.         <!-- horizontal axis -->
  98.         <mx:horizontalAxis>
  99.             <mx:CategoryAxis id="ca"
  100.                     categoryField="@date"
  101.                     title="August 2007"
  102.                     labelFunction="categoryAxis_labelFunc" />
  103.         </mx:horizontalAxis>
  104.  
  105.         <!-- horizontal axis renderer -->
  106.         <mx:horizontalAxisRenderers>
  107.             <mx:AxisRenderer axis="{ca}"
  108.                     canDropLabels="true" />
  109.         </mx:horizontalAxisRenderers>
  110.  
  111.         <!-- series -->
  112.         <mx:series>
  113.             <mx:ColumnSeries displayName="Open"
  114.                     xField="@date"
  115.                     yField="@open"
  116.                     labelFunction="columnSeries_labelFunc"
  117.                     labelPosition="outside">
  118.             </mx:ColumnSeries>
  119.         </mx:series>
  120.  
  121.         <!-- series filters -->
  122.         <mx:seriesFilters>
  123.             <mx:Array />
  124.         </mx:seriesFilters>
  125.     </mx:ColumnChart>
  126.  
  127. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Chart | No Comments » | 3,810 views Tags: , , ,

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll