2010-03-22 11 views
5

In flex charting, Ich möchte etwas wie "Bezugslinien" zeichnen, die sich auf bestimmte Serien beziehen, daher sind diese Linien keine unabhängige Serie und sollten nicht in der Legende angezeigt werden. Können einige Serien aus der Diagrammlegende ausgeschlossen werden? Danke!Ausschließen von Reihen in der Legende (Flex)

Antwort

7

Es ist möglich, einige Serien aus der Diagrammlegende auszuschließen.

Jede Diagrammklasse (Erweiterung von ChartBase) verfügt über eine legendData-Array-Eigenschaft. Diese legendData hat eine Liste von LegendItems. Wenn Sie ein neues Array basierend auf den legendData erstellen, aber nur mit den LegendItems, die Sie möchten; Dann können Sie dieses Array als dataProvider für Ihre Legende festlegen.

Sie können auch Ihr eigenes Array von LegendItems basierend auf LegendItems erstellen, die Sie von Grund auf neu erstellen. Und verwende dieses Array als DataProvider für die Legende.

Zum Beispiel, hier habe ich nur die erste und die dritte Reihe in meiner Legende anzuzeigen:

<mx:Script> 
    <![CDATA[ 
     private function cc(event:Event):void 
     { 
      var newArray:Array = new Array(); 
      newArray.push(myChart.legendData[0]); 
      newArray.push(myChart.legendData[2]); 

      myActionScriptLegend.dataProvider = newArray; 
     } 
    ]]> 
</mx:Script> 

<mx:ColumnChart id="myChart"> 
    <mx:series> 
     <mx:ColumnSeries id="series0"/> 
     <mx:ColumnSeries id="series1"/> 
     <mx:ColumnSeries id="series2"/> 
    </mx:series> 
</mx:ColumnChart> 
<mx:Legend dataProvider="{[myChart.legendData[0],myChart.legendData[2]]}" /> 
<mx:Legend id="myActionScriptLegend" creationComplete="cc(event)" /> 

http://livedocs.adobe.com/flex/3/langref/mx/charts/chartClasses/ChartBase.html#legendData
http://livedocs.adobe.com/flex/3/langref/mx/charts/LegendItem.html
http://livedocs.adobe.com/flex/3/html/charts_displayingdata_12.html#330954

+0

Vielen Dank! Ist es auch in ActionScript verfügbar? –

+1

Ich habe eine zweite Legende (id = "myActionScriptLegend") zur Verfügung gestellt, die das Gleiche in ActionScript tut. Ich hoffe, das hilft. –

+0

Danke Luis, es hat mir geholfen, das Problem zu lösen, das viele meiner Zeit getötet hat – Anoop

10

ich auf Luis B Antwort erarbeitet diese dynamisch zu machen reflektieren der Datenanbieter des Liniendiagramms. Auf diese Weise zeigt die Legende nur, welche Felder im Diagramm verfügbar sind. Ein bisschen schlau.

Hier ist, was ich kam mit, und es funktioniert gut:

 protected function onUpdateLinechartComplete(e:FlexEvent):void 
     { 

      //empty legend for fresh display 
      var legendArray:Array = new Array(); 
      legend1.dataProvider = legendArray; 

      //filter Legend data so that only LineSeries with data can be shown 
      for(var i:int=0; i< linechart1.legendData.length; i++) { 

       //if data is found in the line series, let's add it to the chart legend data provider, so it can be displayed in the legend 
       if (linechart1.legendData[i].element.items.length != 0) { 
        legendArray.push(linechart1.legendData[i]); 
       } 

      } 
      legend1.dataProvider = legendArray; 
      legend1.direction = "vertical"; 
     } 



//in the page Initialize function, I add a listener event to the linechart component for when the legend update completes so it can filter lineseries on the legend's dataprovider in [onUpdateLegendComplete] 
linechart1.addEventListener(FlexEvent.UPDATE_COMPLETE, onUpdateLinechartComplete); 

ich mit am Ende einen Eventhandler verwenden und ein Event-Listener an das Liniendiagramm selbst anbringen. Dies liegt daran, dass ich "Race Conditions" mit dem Datenanbieter der Legende hatte. Manchmal würde es funktionieren, manchmal nicht. Verwenden des Ereignisses Der Listener hat dieses Problem behoben und filtert nur die Legende, wenn das Liniendiagramm vollständig geladen wurde.

FÜHLEN SIE FREI, DIESE ANTWORT ZU BEGINNEN, FLEX FOLKS !!

+1

Ich mag es. Wahrscheinlich stimmt die andere Antwort wirklich für das OP, aber das ist was ich brauche. – Fletch

4

OK eine andere Version von devtron Antwort, wenn Sie bereits eine benutzerdefinierte Liniendiagramm Klasse sowieso haben wie ich, dann ist dieses in setzen:

[Bindable] public var activeLegendData:Array; 

// this goes in an initialize handler 
addEventListener(FlexEvent.UPDATE_COMPLETE, onUpdateChartComplete); 

protected function onUpdateChartComplete(e:FlexEvent):void { 
    activeLegendData = new Array(); 
    for(var i:int=0; i < legendData.length; i++) { 
     if (legendData[i].element.items.length != 0) { 
      activeLegendData.push(legendData[i]); 
     } 
    } 
} 

Dann binden Sie Ihre Legende Datenprovider linechart.activeLegendData statt Liniendiagramm.

Der Vorteil dieser Lösung gegenüber Devtron besteht darin, dass Sie den Code nicht jedes Mal neu schreiben müssen, wenn Sie ein anderes Liniendiagramm in Ihre App einfügen.

+0

Ich sehe nicht, wie das anders als meine Antwort ist, außer Sie binden nicht explizit die Legende? – D3vtr0n

1

Eine weitere Alternative ...

Leiten Sie eine neue Klasse von einer der Kartenserie Klassen, dann den Getter für legendData() überschreiben und ein leeres Array zurück. Hier ein Beispiel für PlotSeries:

public class PlotSeriesNoLegend extends PlotSeries 
{ 
    public function PlotSeriesNoLegend() 
    { 
     super(); 
    } 

    override public function get legendData():Array /* of LegendData */ 
    { 
     return [ ]; 
    } 
} 
0

Einige Kommentare zu früheren Antworten. Wenn Sie ein neues Array erstellen, um es als Legende zu verwenden, sollten Sie darauf achten, dass es nicht wie beschrieben ist.Für mich funktioniert es so:

Wenn Sie versuchen, auf einen Wert in der vorhandenen pie.legendData zugreifen, sollten Sie es folgendermaßen tun: pie.legendData [0] [0] oder pie.legendData [0] [1 ]

Um diese Daten in ein neues Array zu bekommen und sie zum Erstellen der neuen Legende zu verwenden, sollten Sie darauf warten, dass der Kuchen bereits erstellt wurde.

Dafür verwende ich einfach das Render-Ereignis des Kuchens.

Ich hoffe, es hilft Ihnen.

Verwandte Themen