Flex中如何通过horizontalStroke样式自定义LineChart图表水平网格颜色的例子

By Minidxer | November 27, 2008

接下来的例子演示了Flex中如何通过horizontalStroke样式，自定义LineChart图表水平网格颜色。

让我们先来看一下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.events.ColorPickerEvent;
  10.  
  11.             private function colorPicker_change(evt:ColorPickerEvent):void {
  12.                 var stroke:Stroke = new Stroke(evt.color, 0, 1.0);
  13.                 gridLines.setStyle("horizontalStroke", stroke);
  14.             }
  15.         ]]>
  16.     </mx:Script>
  17.  
  18.     <mx:XMLListCollection id="dp">
  19.         <mx:source>
  20.             <mx:XMLList>
  21.                 <quote date="8/27/2007" open="40.38" close="40.81" />
  22.                 <quote date="8/24/2007" open="40.5" close="40.41" />
  23.                 <quote date="8/23/2007" open="40.82" close="40.6" />
  24.                 <quote date="8/22/2007" open="40.4" close="40.77" />
  25.                 <quote date="8/21/2007" open="40.41" close="40.13" />
  26.                 <quote date="8/20/2007" open="40.55" close="40.74" />
  27.                 <quote date="8/17/2007" open="40.18" close="40.32" />
  28.                 <quote date="8/16/2007" open="39.83" close="39.96" />
  29.                 <quote date="8/15/2007" open="40.22" close="40.18" />
  30.                 <quote date="8/14/2007" open="41.01" close="40.41" />
  31.                 <quote date="8/13/2007" open="41" close="40.83" />
  32.                 <quote date="8/10/2007" open="41.3" close="41.06" />
  33.                 <quote date="8/9/2007" open="39.9" close="40.75" />
  34.                 <quote date="8/8/2007" open="39.61" close="40.23" />
  35.                 <quote date="8/7/2007" open="39.08" close="39.42" />
  36.                 <quote date="8/6/2007" open="38.71" close="39.38" />
  37.                 <quote date="8/3/2007" open="39.47" close="38.75" />
  38.                 <quote date="8/2/2007" open="39.4" close="39.52" />
  39.                 <quote date="8/1/2007" open="40.29" close="39.58" />
  40.             </mx:XMLList>
  41.         </mx:source>
  42.     </mx:XMLListCollection>
  43.  
  44.     <mx:ApplicationControlBar dock="true">
  45.         <mx:Label text="Stroke color:" />
  46.         <mx:ColorPicker id="colorPicker" change="colorPicker_change(event);" />
  47.  
  48.         <mx:Spacer width="100%" />
  49.  
  50.         <mx:Legend dataProvider="{lineChart}"
  51.                 direction="horizontal" />
  52.     </mx:ApplicationControlBar>
  53.  
  54.     <mx:LineChart id="lineChart"
  55.             showDataTips="true"
  56.             dataProvider="{dp}"
  57.             width="100%"
  58.             height="100%">
  59.  
  60.         <mx:backgroundElements>
  61.             <mx:GridLines id="gridLines" direction="horizontal">
  62.                 <mx:horizontalStroke>
  63.                     <mx:Stroke color="black" weight="0" alpha="1.0" />
  64.                 </mx:horizontalStroke>
  65.             </mx:GridLines>
  66.         </mx:backgroundElements>
  67.  
  68.         <!-- vertical axis -->
  69.         <mx:verticalAxis>
  70.             <mx:LinearAxis baseAtZero="false" title="Price" />
  71.         </mx:verticalAxis>
  72.  
  73.         <!-- horizontal axis -->
  74.         <mx:horizontalAxis>
  75.             <mx:CategoryAxis id="ca" categoryField="@date" title="Date" />
  76.         </mx:horizontalAxis>
  77.  
  78.         <!-- horizontal axis renderer -->
  79.         <mx:horizontalAxisRenderers>
  80.             <mx:AxisRenderer axis="{ca}" canDropLabels="true" />
  81.         </mx:horizontalAxisRenderers>
  82.  
  83.         <!-- series -->
  84.         <mx:series>
  85.             <mx:LineSeries yField="@open" displayName="Open" />
  86.         </mx:series>
  87.     </mx:LineChart>
  88.  
  89. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll