Flex: LinearAxis-Werte umkehren

Question

Ich habe ein Liniendiagramm, das alle paar Sekunden aktualisiert wird, ähnlich wie im Task-Manager von Windows. Das Diagramm wird von rechts nach links mit den neuesten Daten auf der rechten Seite und nach links ausgerichtet. Wie würde ich die Werte der X-Achse invertieren, so dass der niedrigste Wert rechts und der höchste links ist? Es ist eine LinearAxis.

Ich habe versucht, es zu einem CategoryAxis und setzen Sie die Zahlen manuell, aber das funktioniert nicht so, wie es sollte (die Etiketten sind nicht mit den Ticks ausgerichtet).

Oder gibt es eine Möglichkeit, die Labels in einer CategoryAxis mit den Ticks auszurichten?

Answer 1

Also ich habe es untersucht und ich kann auch nicht eine einfache Art der Spiegelung der Achse sehen. Jedoch habe ich eine Lösung, die perfekt funktionieren würde und ist relativ elegant, was die Unterlassung einer Eigenschaft, dies für Sie zu tun, zu geben.

Betrachten Sie also dieses normale Diagramm von links nach rechts (sollte nur in der Lage sein, dieses in ein Projekt zu kopieren und einzufügen).

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
    <mx:Script> 
     <![CDATA[   
     import mx.collections.ArrayCollection; 

     [Bindable] 
     private var timeValue:ArrayCollection = new ArrayCollection([ 
      { Time: 0, Value: 18 }, 
      { Time: 1, Value: 20 }, 
      { Time: 2, Value: 30 }, 
      { Time: 3, Value: 35 }, 
      { Time: 4, Value: 35 }, 
      { Time: 5, Value: 32 }, 
      { Time: 6, Value: 40 }, 
      { Time: 7, Value: 62 }, 
      { Time: 8, Value: 80 }, 
      { Time: 9, Value: 75 }, 
      { Time: 10, Value: 76 } ]); 
     ]]> 
    </mx:Script> 

    <!-- Define custom colors for use as fills. --> 
    <mx:SolidColor id="sc1" color="yellow" alpha=".8"/> 

    <!-- Define custom Strokes for the columns. --> 
    <mx:Stroke id="s1" color="yellow" weight="2"/> 

    <mx:Panel title="ColumnChart and BarChart Controls Example" 
     height="100%" width="100%" layout="horizontal"> 
     <mx:LineChart id="column" 
      height="100%" 
      width="100%" 
      paddingLeft="5" 
      paddingRight="5" 
      showDataTips="true" 
      dataProvider="{timeValue}" > 

      <mx:horizontalAxis> 
       <mx:LinearAxis maximum="10" minimum="0"/> 
      </mx:horizontalAxis> 

      <mx:verticalAxis> 
       <mx:LinearAxis maximum="100" minimum="0" />   
      </mx:verticalAxis> 

      <mx:series> 
       <mx:LineSeries 
        xField="Time" 
        yField="Value" 
        displayName="TimeValue" 
        fill="{sc1}" 
        stroke="{s1}" 
       /> 
      </mx:series> 
     </mx:LineChart> 

    </mx:Panel> 
</mx:Application> 

Um dies zu zu einem von rechts nach links Diagramm zu ändern, ich tue Werte etwas Invertierung der Zeit, sie negativ und dann zeichnen sie sich entlang einer Achse zu machen, die ein negatives Minimum und Null als Maximum verwendet. Ich führe dann auch eine Funktion auf den Etiketten durch, um sie wieder positiv auf die ursprüngliche Datenquelle anzupassen.

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
    <mx:Script> 
     <![CDATA[ 
      import mx.charts.chartClasses.IAxisRenderer;   
      import mx.collections.ArrayCollection; 

      [Bindable] 
      private var timeValue:ArrayCollection = new ArrayCollection([ 
       { Time: 0, Value: 18 }, 
       { Time: 1, Value: 20 }, 
       { Time: 2, Value: 30 }, 
       { Time: 3, Value: 35 }, 
       { Time: 4, Value: 35 }, 
       { Time: 5, Value: 32 }, 
       { Time: 6, Value: 40 }, 
       { Time: 7, Value: 62 }, 
       { Time: 8, Value: 80 }, 
       { Time: 9, Value: 75 }, 
       { Time: 10, Value: 76 } ]); 

      private function verticalAxisParseFunction(value : Number) : Number 
      { 
       return value * -1; 
      } 

      private function horizontalAxisRenderedLabelFunction(axisRenderer:IAxisRenderer, label:String):String 
      { 
       var labelAsNumber : Number = Number(label); 

       if (isNaN(labelAsNumber)) 
       { 
        return label; 
       } 

       return (labelAsNumber * -1).toString(); 
      } 

     ]]> 
    </mx:Script> 

    <!-- Define custom colors for use as fills. --> 
    <mx:SolidColor id="sc1" color="yellow" alpha=".8"/> 

    <!-- Define custom Strokes for the columns. --> 
    <mx:Stroke id="s1" color="yellow" weight="2"/> 

    <mx:Panel title="ColumnChart and BarChart Controls Example" 
     height="100%" width="100%" layout="horizontal"> 
     <mx:LineChart id="column" 
      height="100%" 
      width="100%" 
      paddingLeft="5" 
      paddingRight="5" 
      showDataTips="true" 
      dataProvider="{timeValue}" > 

      <mx:horizontalAxis> 
       <mx:LinearAxis id="horizontalAxis" maximum="0" minimum="-10" parseFunction="{verticalAxisParseFunction}"/> 
      </mx:horizontalAxis> 

      <mx:verticalAxis> 
       <mx:LinearAxis id="verticalAxis" maximum="100" minimum="0" />   
      </mx:verticalAxis> 

      <mx:horizontalAxisRenderers> 
       <mx:AxisRenderer 
        axis="{horizontalAxis}" 
        labelFunction="{horizontalAxisRenderedLabelFunction}" /> 
      </mx:horizontalAxisRenderers> 

      <mx:verticalAxisRenderers> 
       <mx:AxisRenderer 
        axis="{verticalAxis}" 
        placement="right" /> 
      </mx:verticalAxisRenderers> 


      <mx:series> 
       <mx:LineSeries 
        xField="Time" 
        yField="Value" 
        displayName="TimeValue" 
        fill="{sc1}" 
        stroke="{s1}" 
       /> 
      </mx:series> 
     </mx:LineChart> 

    </mx:Panel> 
</mx:Application> 

Answer 2

Haben Sie versucht, den Inhalt Ihres Datenproviders umzukehren?

Answer 3

Wie bevölkern Sie die Daten im Diagramm? Wenn Sie die Daten, die in das Diagramm gehen, in absteigender Reihenfolge sortieren, können Sie sie mit der höchsten auf der linken und der niedrigsten auf der rechten Seite anzeigen lassen.