Flex chart komponenta s customa natpisima

Nedavno je moj kolega htio složiti graf na svom siteu, no nije mogao naći neki dobar besplatni PHP library kako bi skicirao stanje u NBA utrci za najvrijednijeg igrača lige. Stoga sam mu nabrzinu složio jednostavan primjer u Flexu koristeći Flex charting komponente, standardni dio Flex Buildera 3 Pro.

Da vidimo što nam treba da bismo napravili ovakav jedan primjer.  Napravit ćemo tri array objekta koje možemo vezati na dataProvidere (obavezno koristiti naredbu [Bindable]). Napravimo LineChart koji će na prilikom inicijalizacije prikazivati broj koševa po utakmici za svakog pojedinog igrača. Na horitonzalnoj x-osi će se prikazati o kojoj je sezoni riječ. Na vertikalnoj osi će se prikazivati vrijednost iz svake pojedine linije na grafu. Linije će biti definirane unutar taga <series>, no treba naglasiti kako se na grafu koristi custom funkcija yAxisLabel kako bi se napravio preuređeni natpis na vertikalnoj osi.

Serije (ajmo ih tako nazvati) u grafu koriste dataProvider koji smo definirali u vertikalnoj osi, ali za svaku od tih serija potrebno je navesti koji element iz objekta array ćemo koristiti kao podatak na horizontalnoj i vertikalnoj osi.

Kada već imamo graf, onda nije loše da imamo i legendu. Legenda će se vezati na graf preko atributa dataProvider, gdje kao vrijednost vežemo objekt “chartPPG”.

Klikom na dodatna dva gumba mijenjamo dataProvidera grafa, pa se na taj način prikazuju drugačije vrijednosti.

Ovdje možete pogledati i uživo kako to izgleda: MVP Race graf

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#FFFFFF">
<mx:Script>
<![CDATA[
	import mx.controls.Alert;
	import mx.charts.events.ChartItemEvent;
	import mx.charts.chartClasses.Series;
	import mx.charts.ChartItem;
	import mx.charts.chartClasses.IAxis;

	[Bindable]
	public var statsPpg:Array = [
	{season:'03-04',kobe:24.0, dwayne:16.2, lebron: 20.9},
	{season:'04-05',kobe:27.6, dwayne:24.1, lebron: 27.2},
	{season:'05-06',kobe:35.4, dwayne:27.2, lebron: 31.4},
	{season:'06-07',kobe:31.6, dwayne:27.4, lebron: 27.3},
	{season:'07-08',kobe:28.3, dwayne:24.6, lebron: 30.0},
	{season:'08-09',kobe:27.2, dwayne:29.9, lebron: 28.4}
	];

	public var statsAssists:Array = [
	{season:'03-04',kobe:5.1, dwayne:4.5, lebron: 5.9},
	{season:'04-05',kobe:6, dwayne:6.8, lebron: 7.2},
	{season:'05-06',kobe:4.5, dwayne:6.7, lebron: 6.6},
	{season:'06-07',kobe:5.4, dwayne:7.5, lebron: 6},
	{season:'07-08',kobe:5.4, dwayne:6.9, lebron: 7.2},
	{season:'08-09',kobe:5, dwayne:7.5, lebron: 7.4}
	];

	private function yAxisLabel(value:Object, previousValue:Object, axis:IAxis):String
	{
		return value + ' pg';
	}

	private function setStats(type:String):void
	{
		if (type == 'ppg')
		{
			chartPPG.dataProvider = statsPpg;
			categories.dataProvider  = statsPpg;
			yAxis.title = "Points per game";
		}
		else if  ( type == 'assists')
		{
			chartPPG.dataProvider = statsAssists;
			categories.dataProvider  = statsAssists;
			yAxis.title = "Assists per game";
		}

	}

]]>
</mx:Script>
<mx:Panel width="790" title="NBA MVP race: Kobe vs. LeBron vs. Dwayne" layout="horizontal">
	<mx:LineChart dataProvider="{statsPpg}" id="chartPPG" name="Comparison" showDataTips="true">
		<mx:horizontalAxis>
			<mx:CategoryAxis dataProvider="{statsPpg}" categoryField="season" title="NBA seasons" id="categories"/>
		</mx:horizontalAxis>
		<mx:verticalAxis>
			<mx:LinearAxis labelFunction="{yAxisLabel}"  title="Points per game" id="yAxis"/>
		</mx:verticalAxis>
		<mx:series>
			<mx:LineSeries id="Kobe" yField="kobe" xField="season" displayName="Kobe Bryant"/>
			<mx:LineSeries id="Dwayne" yField="dwayne" xField="season" displayName="Dwayne Wade" />
			<mx:LineSeries id="LeBron" yField="lebron" xField="season" displayName="LeBron James" />
		</mx:series>
	</mx:LineChart>
	<mx:Legend dataProvider="{chartPPG}" direction="vertical"  width="174"/>
	<mx:Button label="PPG" click="setStats('ppg')"/>
	<mx:Button label="Assists" click="setStats('assists')"/>
</mx:Panel>

</mx:Application>

Ostavite komentar:

Click here to cancel reply.

Ime *

Mail adresa (neće biti javno objavljena) *

Website

CAPTCHA Code