The following example shows how you can create a linear gradient fill for a ColumnSeries in Flex
<?
xml version="1.0"
?>
<!-- http://blog.flexexamples.com/2007/11/20/creating-a-linear-gradient-fill-on-a-columnchart-controls-column-series-in-flex/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="middle"
backgroundColor ="white" >
< mx:Script >
<![CDATA[
import mx.charts.chartClasses.IAxis;
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%" >
<!-- 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:LinearGradient id ="linearGradient" >
< mx:entries >
< mx:Array >
< mx:GradientEntry color ="red"
ratio ="0.0"
alpha ="1.0" />
< mx:GradientEntry color ="black"
ratio ="1.0"
alpha ="1.0" />
</ mx:Array >
</ mx:entries >
</ mx:LinearGradient >
</ mx:fill >
</ mx:ColumnSeries >
</ mx:series >
<!-- series filters -->
< mx:seriesFilters >
< mx:Array />
</ mx:seriesFilters >
</ mx:ColumnChart >
</ mx:Application >
<!-- http://blog.flexexamples.com/2007/11/20/creating-a-linear-gradient-fill-on-a-columnchart-controls-column-series-in-flex/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="middle"
backgroundColor ="white" >
< mx:Script >
<![CDATA[
import mx.charts.chartClasses.IAxis;
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%" >
<!-- 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:LinearGradient id ="linearGradient" >
< mx:entries >
< mx:Array >
< mx:GradientEntry color ="red"
ratio ="0.0"
alpha ="1.0" />
< mx:GradientEntry color ="black"
ratio ="1.0"
alpha ="1.0" />
</ mx:Array >
</ mx:entries >
</ mx:LinearGradient >
</ mx:fill >
</ mx:ColumnSeries >
</ mx:series >
<!-- series filters -->
< mx:seriesFilters >
< mx:Array />
</ mx:seriesFilters >
</ mx:ColumnChart >
</ mx:Application >
本文转自 OldHawk 博客园博客,原文链接:http://www.cnblogs.com/taobataoma/archive/2008/01/13/1037058.html
,如需转载请自行联系原作者