[ Adobe Flex ] Mudando o estilo visual dos Charts

Colocado por Erko Bridee na(s) categoria(s): 1, 2009, 4, 6, action, Actionscript, Actionscript3, Adobe, Adobe Air, Adobe Flex, Air, api, app, AR, Artigo, as3, AUG, auto, back, bar, BI, Bindable, blog, browser, case, class, classe, classes, código, collection, Componente, Componentes, control, Controls, DataProvider, efeito, Estilo, exemplo, filter, Flex, Flex 3, Flexmania, for, framework, function, Google, Gráfico, html, ide, IE, if, image, int, Java, Java Magazine, Javascript, label, layout, live, MEF, mg, MXML, Number, O, on, Oracle, padrão, pt, Ria’s Geral, string, Stroke, Swiz Framework, TAT, try, UI, uint, Ved, web, XML, XMLList, XP em 11 3rd, 2010 | Sem comentários

Algo legal no Flex é que eles nos disponibiliza gráficos, porém, sinceramente o estilo padrão dos gráficos com cores sólidas não me agrada muito, ao meu ver cansa os olhos, então resolvi mudar as cores solidas para um padrão em degrade, para suavizar as cores…

Obs.: tendo em mente que os componentes dos gráficos ainda são os mesmos no Flex 3 e 4 os códigos mxml a seguir serão do Flex 3.

Começando pelo gráfico de barras, para ter o seguinte resultado precisei:

Código MXML:

^?View Code ACTIONSCRIPT3

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
        	import code.StyleColumnChart;
 
            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"
                    fill="{StyleColumnChart.orangeLinearGradient}"
                    stroke="{StyleColumnChart.orangeStroke}">
            </mx:ColumnSeries>
            <mx:ColumnSeries
            		displayName="Close"
                    xField="@date"
                    yField="@close"
                    fill="{StyleColumnChart.blueLinearGradient}"
                    stroke="{StyleColumnChart.blueStroke}">
            </mx:ColumnSeries>
        </mx:series>
 
        <!-- series filters -->
        <mx:seriesFilters>
            <mx:Array />
        </mx:seriesFilters>
    </mx:ColumnChart>
</mx:Application>

Obs.: esse código acima reaproveitei do respectivo post do blog.flexexamples.com

Código da classe AS3 para gerar o efeito visual:

^?View Code ACTIONSCRIPT3

package code
{
	import mx.graphics.GradientEntry;
	import mx.graphics.LinearGradient;
	import mx.graphics.Stroke;
 
	[Bindable]
	public class StyleColumnChart
	{
		public function StyleColumnChart() {}
 
		//----------------------------------------------------------------------
		// @BEGIN: LinearGradient color
 
		public static function linearGradientColor(colorDark:uint, colorLight:uint):LinearGradient {
			var linearGradient:LinearGradient = new LinearGradient();
			var arr:Array = [];
			arr.push(new GradientEntry(colorDark, 0.0, 0.8));
			arr.push(new GradientEntry(colorLight, 1.0, 0.6));
			linearGradient.entries = arr;
			return linearGradient;
		}
 
		public static function get redLinearGradient():LinearGradient {
			return linearGradientColor(0x990000,0xEE0000);
		}
 
		public static function get greenLinearGradient():LinearGradient {
			return linearGradientColor(0x008B00,0x00FF00);
		}
 
		public static function get blueLinearGradient():LinearGradient {
			return linearGradientColor(0x0066FF,0x00CCFF);
		}
 
		public static function get yellowLinearGradient():LinearGradient {
			return linearGradientColor(0xCAC333, 0xF5F30E);
		}
 
		public static function get orangeLinearGradient():LinearGradient {
			return linearGradientColor(0xFC9C00, 0xFCC048);
		}
 
		// @END: LinearGradient color
		//----------------------------------------------------------------------
		// @BEGIN: stroke color
 
		public static function strokeColor(color:uint):Stroke {
			return new Stroke(color,1);
		}
 
		public static function get redStroke():Stroke {
			return strokeColor(0x990000);
		}
 
		public static function get greenStroke():Stroke {
			return strokeColor(0x008B00);
		}
 
		public static function get blueStroke():Stroke {
			return strokeColor(0x0066FF);
		}
 
		public static function get yellowStroke():Stroke {
			return strokeColor(0xCAC333);
		}
 
		public static function get orangeStroke():Stroke {
			return strokeColor(0xFC9C00);
		}
 
		// @END: stroke color
		//----------------------------------------------------------------------
	}
}

A seguir segue um exemplo para gráfico de pizza:

Código MXML:

^?View Code ACTIONSCRIPT3

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
     import mx.collections.ArrayCollection;
 
     import code.StylePieChart;
 
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Data:"IN", Value:2000},
        {Data:"OUT", Value:1000}
     ]);
 
    ]]>
  </mx:Script>
 
  <mx:Panel title="Pie Chart">
 
     <mx:PieChart id="myChart"
        dataProvider="{expenses}"
        showDataTips="true">
        <mx:series>
           <mx:PieSeries
                field="Value"
                nameField="Data"
                labelPosition="callout"
                fills="{StylePieChart.inOutFills}"/>
        </mx:series>
     </mx:PieChart>
 
     <mx:Legend dataProvider="{myChart}"/>
 
  </mx:Panel>
 
</mx:Application>

Código da classe AS3 para gerar o efeito visual:

^?View Code ACTIONSCRIPT3

package code
{
	import mx.graphics.GradientEntry;
	import mx.graphics.RadialGradient;
	import mx.graphics.SolidColor;
 
	[Bindable]
	public class StylePieChart
	{
		public function StylePieChart()	{}
 
		//----------------------------------------------------------------------
 
		public static function get inOutFills():Array {
			var gradients:Array = new Array();
 
			var fill:RadialGradient = null;
			var g1:GradientEntry = null;
			var g2:GradientEntry = null;
 
			fill = new RadialGradient();
			g1 = new GradientEntry(0xCC3640);
			g2 = new GradientEntry(0x990000);
			fill.entries = [g1,g2];
			gradients.splice(-1,0,fill);
 
			fill = new RadialGradient();
			g1 = new GradientEntry(0x30BB32);
			g2 = new GradientEntry(0x009900);
			fill.entries = [g1,g2];
			gradients.splice(-1,0,fill);
 
			return gradients;
		}
 
		//----------------------------------------------------------------------
	}
}