Flex中如何创建放射线状填充列图(ColumnChart)图表的例子

 

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

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.charts.events.ChartItemEvent;
10.             import mx.charts.chartClasses.IAxis;
11.             import mx.charts.series.items.ColumnSeriesItem;
12.             import mx.core.UIComponent;
13.  
14.             private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
15.                 return currencyFormatter.format(item);
16.             }
17.  
18.             private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String {
19.                 var datNum:Number = Date.parse(item);
20.                 var tempDate:Date = new Date(datNum);
21.                 return dateFormatter.format(tempDate).toUpperCase();
22.             }
23.         ]]>
24.     </mx:Script>
25.  
26.     <mx:DateFormatter id="dateFormatter" formatString="DD" />
27.     <mx:CurrencyFormatter id="currencyFormatter" precision="2" />
28.  
29.     <mx:XMLListCollection id="dp">
30.         <mx:source>
31.             <mx:XMLList>
32.                 <quote date="8/1/2007" open="40.29" close="39.58" />
33.                 <quote date="8/2/2007" open="39.4" close="39.52" />
34.                 <quote date="8/3/2007" open="39.47" close="38.75" />
35.                 <quote date="8/6/2007" open="38.71" close="39.38" />
36.                 <quote date="8/7/2007" open="39.08" close="39.42" />
37.                 <quote date="8/8/2007" open="39.61" close="40.23" />
38.                 <quote date="8/9/2007" open="39.9" close="40.75" />
39.                 <quote date="8/10/2007" open="41.3" close="41.06" />
40.                 <quote date="8/13/2007" open="41" close="40.83" />
41.                 <quote date="8/14/2007" open="41.01" close="40.41" />
42.                 <quote date="8/15/2007" open="40.22" close="40.18" />
43.                 <quote date="8/16/2007" open="39.83" close="39.96" />
44.                 <quote date="8/17/2007" open="40.18" close="40.32" />
45.                 <quote date="8/20/2007" open="40.55" close="40.74" />
46.                 <quote date="8/21/2007" open="40.41" close="40.13" />
47.                 <quote date="8/22/2007" open="40.4" close="40.77" />
48.                 <quote date="8/23/2007" open="40.82" close="40.6" />
49.                 <quote date="8/24/2007" open="40.5" close="40.41" />
50.                 <quote date="8/27/2007" open="40.38" close="40.81" />
51.             </mx:XMLList>
52.         </mx:source>
53.     </mx:XMLListCollection>
54.  
55.     <mx:ColumnChart id="columnChart"
56.             showDataTips="true"
57.             dataProvider="{dp}"
58.             width="100%"
59.             height="100%">
60.  
61.         <mx:backgroundElements>
62.             <mx:GridLines>
63.                 <mx:horizontalStroke>
64.                     <mx:Stroke color="haloSilver" weight="0" />
65.                 </mx:horizontalStroke>
66.             </mx:GridLines>
67.         </mx:backgroundElements>
68.  
69.         <!-- vertical axis -->
70.         <mx:verticalAxis>
71.             <mx:LinearAxis baseAtZero="false"
72.                     labelFunction="linearAxis_labelFunc" />
73.         </mx:verticalAxis>
74.  
75.         <!-- horizontal axis -->
76.         <mx:horizontalAxis>
77.             <mx:CategoryAxis id="ca"
78.                     categoryField="@date"
79.                     title="August 2007"
80.                     labelFunction="categoryAxis_labelFunc" />
81.         </mx:horizontalAxis>
82.  
83.         <!-- horizontal axis renderer -->
84.         <mx:horizontalAxisRenderers>
85.             <mx:AxisRenderer axis="{ca}"
86.                     canDropLabels="true" />
87.         </mx:horizontalAxisRenderers>
88.  
89.         <!-- series -->
90.         <mx:series>
91.             <mx:ColumnSeries displayName="Open"
92.                     xField="@date"
93.                     yField="@open">
94.                 <mx:fill>
95.                     <mx:RadialGradient>
96.                         <mx:entries>
97.                             <mx:Array>
98.                                 <mx:GradientEntry color="white"
99.                                         ratio="0.0"
100.                                         alpha="1.0" />
101.                                 <mx:GradientEntry color="haloBlue"
102.                                         ratio="1.0"
103.                                         alpha="1.0" />
104.                             </mx:Array>
105.                         </mx:entries>
106.                     </mx:RadialGradient>
107.                 </mx:fill>
108.             </mx:ColumnSeries>
109.         </mx:series>
110.  
111.         <!-- series filters -->
112.         <mx:seriesFilters>
113.             <mx:Array />
114.         </mx:seriesFilters>
115.     </mx:ColumnChart>
116.  
117. </mx:Application>

本文转自:http://blog.minidx.com/2008/12/16/1741.html