[ Adobe Flex ] Mudando o estilo visual dos Charts

terça-feira, 02/11/2010 9:58 pm  

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:

column-chart

Código MXML:

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<?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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
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:

pie-chart

Código MXML:

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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;
		}
 
		//----------------------------------------------------------------------
	}
}

Para achar as cores utilizei os itens descritos neste post: [Adobe AIR] Color Browser

 

Atualizado: 20101103 1940

Não fiquei muito satisfeito com o código inicial publicado aqui, então evolui mais o código, veja na próxima página…

 

Página: 1 2

, , ,

Este post foi escrito por:

- que escreveu 500 post(s).


Entre em contato