<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"
initialize="application1_initializeHandler(event)">
<mx:Script>
<![CDATA[
import mx.charts.Legend;
import mx.charts.LineChart;
import mx.charts.series.LineSeries;
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
private function getDataProvider():ArrayCollection {
var arr:Array = [];
arr.push({month: 2, data: 3})/* ;
arr.push({month: 4, data: 5});
arr.push({month: 6, data: 9});
arr.push({month: 11, data: 23} );*/
return new ArrayCollection(arr);
}
protected function init(event:Event):void {
lineChartF();
}
private function lineChartF():void {
var arr:ArrayCollection = new ArrayCollection;
arr = getDataProvider();
var lineChart:LineChart = new LineChart();
lineChart.dataProvider = arr;
lineChart.percentWidth = 60;
lineChart.percentHeight = 60;
lineChart.x = 100;
lineChart.y = 85;
lineChart.showDataTips = true;
var lineSeries:LineSeries = new LineSeries();
lineSeries.xField = "month";
lineSeries.yField = "data";
var arr2:Array = new Array();
arr2.push(lineSeries);
lineChart.series = arr2;
var legendLine:Legend = new Legend();
legendLine.dataProvider = lineChart;
legendLine.x = 700;
legendLine.y = 140;
this.addChild(lineChart);
this.addChild(legendLine);
}
protected function application1_initializeHandler(event:FlexEvent):void
{
init(null);
}
]]>
</mx:Script>
</mx:Application>
LineChart Flex, dataProvider com uma posição o gráfico não apresenta nada, somente mais posição
3 Respostas
lineSeries.setStyle(“itemRenderer”, );new ClassFactory(mx.charts.renderers.CircleItemRenderer)
savoine Realmente funciona, eu estava focado em outras tarefas e acabei nem vendo sua resposta, mas já vo implementa este itemRender na minha aplicação.
Brigadão ai!
Savoine, quero agradecer novamente pela ajuda na resolução de parte do problema que estou tendo com este gráfico.
Mas preciso postar aqui um problema que estou tendo para mostrar o PopUp do mouseOver sobre o ponto do componente. Realmente não sei o que está acontecendo.
Neste gráfico quando tenho uma posição o CircleItemRender resolve o problema de mostrar o ponto no gráfico, porém não mostra o POPUP do mouseover sobre o ponto, não sei mais o que fazer para resolver este problema.
Abaixo segue fontes, para análise, pessoal desde já agradeço pela ajuda.
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"
preinitialize="init();"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.charts.chartClasses.IAxis;
import mx.formatters.CurrencyFormatter;
private var currFormatter:CurrencyFormatter;
private function init():void {
currFormatter = new CurrencyFormatter();
currFormatter.precision = 2;
}
private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
return currFormatter.format(item);
}
private function lineChart_creationComplete():void {
var linearAxisMinimum:int = Math.floor(linearAxis.computedMinimum);
var linearAxisMaximum:int = Math.ceil(linearAxis.computedMaximum);
linearAxis.minimum = linearAxisMinimum;
linearAxis.maximum = linearAxisMaximum;
}
]]>
</mx:Script>
<mx:XMLListCollection id="dp">
<mx:source>
<mx:XMLList>
<quote date="8/27/2007" open="40.38" close="40.81" />
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="minimum:">
<mx:HSlider id="minSlider"
minimum="28"
maximum="38"
value="38"
liveDragging="true"
snapInterval="1"
change="linearAxis.minimum = event.value;" />
</mx:FormItem>
<mx:FormItem label="maximum:">
<mx:HSlider id="maxSlider"
minimum="42"
maximum="52"
value="42"
liveDragging="true"
snapInterval="1"
change="linearAxis.maximum = event.value;" />
</mx:FormItem>
</mx:Form>
<mx:Spacer width="100%" />
<mx:Legend dataProvider="{lineChart}"
direction="horizontal" />
</mx:ApplicationControlBar>
<mx:LineChart id="lineChart"
showDataTips="true"
dataProvider="{dp}"
width="100%"
height="100%"
creationComplete="lineChart_creationComplete();">
<mx:backgroundElements>
<mx:GridLines id="gridLines"
direction="both"
verticalTickAligned="false">
<mx:verticalStroke>
<mx:Stroke color="haloSilver"
weight="0"
alpha="1.0" />
</mx:verticalStroke>
<mx:horizontalStroke>
<!-- Set alpha to 0 so stroke isn't visible. -->
<mx:Stroke color="white"
weight="0"
alpha="0.0" />
</mx:horizontalStroke>
<mx:horizontalFill>
<mx:SolidColor color="haloSilver"
alpha="0.1" />
</mx:horizontalFill>
</mx:GridLines>
</mx:backgroundElements>
<!-- vertical axis -->
<mx:verticalAxis>
<mx:LinearAxis id="linearAxis"
baseAtZero="false"
title="Price (USD)"
minorInterval="0.10"
interval="0.5"
labelFunction="linearAxis_labelFunc" />
</mx:verticalAxis>
<!-- horizontal axis -->
<mx:horizontalAxis>
<mx:CategoryAxis id="ca"
categoryField="@date"
title="Date" />
</mx:horizontalAxis>
<!-- horizontal axis renderer -->
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{ca}"
canDropLabels="true" />
</mx:horizontalAxisRenderers>
<!-- series -->
<mx:series>
<mx:LineSeries yField="@open"
displayName="Open" >
<mx:itemRenderer>
<mx:Component>
<mx:CircleItemRenderer height="10" width="20"/>
</mx:Component>
</mx:itemRenderer>
</mx:LineSeries>
</mx:series>
</mx:LineChart>
</mx:Canvas>