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

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

Download: main.mxml

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white">



<mx:Script>

<![CDATA[

import mx.charts.events.ChartItemEvent;

import mx.charts.chartClasses.IAxis;

import mx.charts.series.items.ColumnSeriesItem;

import mx.core.UIComponent;



private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {

return currencyFormatter.format(item);

}



private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String {

var datNum:Number = Date.parse(item);

var tempDate:Date = new Date(datNum);

return dateFormatter.format(tempDate).toUpperCase();

}

]]>

</mx:Script>



<mx:DateFormatter id="dateFormatter" formatString="DD" />

<mx:CurrencyFormatter id="currencyFormatter" precision="2" />



<mx:XMLListCollection id="dp">

<mx:source>

<mx:XMLList>

<quote date="8/1/2007" open="40.29" close="39.58" />

<quote date="8/2/2007" open="39.4" close="39.52" />

<quote date="8/3/2007" open="39.47" close="38.75" />

<quote date="8/6/2007" open="38.71" close="39.38" />

<quote date="8/7/2007" open="39.08" close="39.42" />

<quote date="8/8/2007" open="39.61" close="40.23" />

<quote date="8/9/2007" open="39.9" close="40.75" />

<quote date="8/10/2007" open="41.3" close="41.06" />

<quote date="8/13/2007" open="41" close="40.83" />

<quote date="8/14/2007" open="41.01" close="40.41" />

<quote date="8/15/2007" open="40.22" close="40.18" />

<quote date="8/16/2007" open="39.83" close="39.96" />

<quote date="8/17/2007" open="40.18" close="40.32" />

<quote date="8/20/2007" open="40.55" close="40.74" />

<quote date="8/21/2007" open="40.41" close="40.13" />

<quote date="8/22/2007" open="40.4" close="40.77" />

<quote date="8/23/2007" open="40.82" close="40.6" />

<quote date="8/24/2007" open="40.5" close="40.41" />

<quote date="8/27/2007" open="40.38" close="40.81" />

</mx:XMLList>

</mx:source>

</mx:XMLListCollection>



<mx:ColumnChart id="columnChart"

showDataTips="true"

dataProvider="{dp}"

width="100%"

height="100%">



<mx:backgroundElements>

<mx:GridLines>

<mx:horizontalStroke>

<mx:Stroke color="haloSilver" weight="0" />

</mx:horizontalStroke>

</mx:GridLines>

</mx:backgroundElements>



<!-- vertical axis -->

<mx:verticalAxis>

<mx:LinearAxis baseAtZero="false"

labelFunction="linearAxis_labelFunc" />

</mx:verticalAxis>



<!-- horizontal axis -->

<mx:horizontalAxis>

<mx:CategoryAxis id="ca"

categoryField="@date"

title="August 2007"

labelFunction="categoryAxis_labelFunc" />

</mx:horizontalAxis>



<!-- horizontal axis renderer -->

<mx:horizontalAxisRenderers>

<mx:AxisRenderer axis="{ca}"

canDropLabels="true" />

</mx:horizontalAxisRenderers>



<!-- series -->

<mx:series>

<mx:ColumnSeries displayName="Open"

xField="@date"

yField="@open">

<mx:fill>

<mx:RadialGradient>

<mx:entries>

<mx:Array>

<mx:GradientEntry color="white"

ratio="0.0"

alpha="1.0" />

<mx:GradientEntry color="haloBlue"

ratio="1.0"

alpha="1.0" />

</mx:Array>

</mx:entries>

</mx:RadialGradient>

</mx:fill>

</mx:ColumnSeries>

</mx:series>



<!-- series filters -->

<mx:seriesFilters>

<mx:Array />

</mx:seriesFilters>

</mx:ColumnChart>



</mx:Application>

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