Flex中如何利用seriesFilters属性添加/删除LineChart图表曲线阴影的例子

By Minidxer | November 22, 2008

接下来的例子演示了Flex中如何利用seriesFilters属性，添加/删除LineChart图表曲线阴影。

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


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

Download: main.mxml
  1. <?xml version="1.0"?>
  2. <!-- http://blog.flexexamples.com/2007/11/13/removing-the-default-drop-shadow-from-a-linechart-chart-in-flex/ -->
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             private function init(evt:Event):void {
  11.                 var chart:LineChart = evt.currentTarget as LineChart;
  12.                 seriesFilterArr = chart.seriesFilters;
  13.             }
  14.  
  15.             private function checkBox_click(evt:MouseEvent):void {
  16.                 var len:uint = lineChart.seriesFilters.length;
  17.                 if (len > 0) {
  18.                     lineChart.seriesFilters = [];
  19.                 } else {
  20.                     lineChart.seriesFilters = seriesFilterArr;
  21.                 }
  22.             }
  23.         ]]>
  24.     </mx:Script>
  25.  
  26.     <mx:XMLListCollection id="dp">
  27.         <mx:source>
  28.             <mx:XMLList>
  29.                 <quote date="8/27/2007" open="40.38" close="40.81" />
  30.                 <quote date="8/24/2007" open="40.5" close="40.41" />
  31.                 <quote date="8/23/2007" open="40.82" close="40.6" />
  32.                 <quote date="8/22/2007" open="40.4" close="40.77" />
  33.                 <quote date="8/21/2007" open="40.41" close="40.13" />
  34.                 <quote date="8/20/2007" open="40.55" close="40.74" />
  35.                 <quote date="8/17/2007" open="40.18" close="40.32" />
  36.                 <quote date="8/16/2007" open="39.83" close="39.96" />
  37.                 <quote date="8/15/2007" open="40.22" close="40.18" />
  38.                 <quote date="8/14/2007" open="41.01" close="40.41" />
  39.                 <quote date="8/13/2007" open="41" close="40.83" />
  40.                 <quote date="8/10/2007" open="41.3" close="41.06" />
  41.                 <quote date="8/9/2007" open="39.9" close="40.75" />
  42.                 <quote date="8/8/2007" open="39.61" close="40.23" />
  43.                 <quote date="8/7/2007" open="39.08" close="39.42" />
  44.                 <quote date="8/6/2007" open="38.71" close="39.38" />
  45.                 <quote date="8/3/2007" open="39.47" close="38.75" />
  46.                 <quote date="8/2/2007" open="39.4" close="39.52" />
  47.                 <quote date="8/1/2007" open="40.29" close="39.58" />
  48.             </mx:XMLList>
  49.         </mx:source>
  50.     </mx:XMLListCollection>
  51.  
  52.     <mx:Array id="seriesFilterArr" />
  53.  
  54.     <mx:ApplicationControlBar dock="true">
  55.         <mx:CheckBox id="checkBox"
  56.                 label="toggle series filters:"
  57.                 labelPlacement="left"
  58.                 selected="false"
  59.                 click="checkBox_click(event);" />
  60.     </mx:ApplicationControlBar>
  61.  
  62.     <mx:LineChart id="lineChart"
  63.             showDataTips="true"
  64.             dataProvider="{dp}"
  65.             width="100%"
  66.             height="100%"
  67.             creationComplete="init(event);">
  68.  
  69.         <!-- vertical axis -->
  70.         <mx:verticalAxis>
  71.             <mx:LinearAxis baseAtZero="false" title="Price" />
  72.         </mx:verticalAxis>
  73.  
  74.         <!-- horizontal axis -->
  75.         <mx:horizontalAxis>
  76.             <mx:CategoryAxis id="ca" categoryField="@date" title="Date" />
  77.         </mx:horizontalAxis>
  78.  
  79.         <!-- horizontal axis renderer -->
  80.         <mx:horizontalAxisRenderers>
  81.             <mx:AxisRenderer axis="{ca}" canDropLabels="true" />
  82.         </mx:horizontalAxisRenderers>
  83.  
  84.         <!-- series -->
  85.         <mx:series>
  86.             <mx:LineSeries yField="@close" form="curve" displayName="Close" />
  87.             <mx:LineSeries yField="@open" form="curve" displayName="Open" />
  88.         </mx:series>
  89.  
  90.     </mx:LineChart>
  91.  
  92. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Chart | No Comments » | Tags: ,

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll