フレックス：LinearAxisの値を反転する

Question

私は、Windowsのタスクマネージャに表示されるような、毎回更新される折れ線グラフを持っています。グラフは右から左に移動し、最新のデータは右に、左に移動します。どのようにして、X軸の値を逆にして、最も低い値が右側に、最も高い値が左側になるでしょうか？ LinearAxisです。

私はそれをCategoryAxisにして手動で数字を入力しようとしましたが、それは（ラベルがダニと一直線にならないように）動作しません。

または、カテゴリーアキシーのラベルをティックと揃える方法はありますか？

Answer 1

私はそれを見てきましたが、軸を反転させる簡単な方法も見えません。しかし、私は完全にうまく動作し、あなたのためにこれを行うプロパティの省略を与える比較的エレガントなソリューションを持っています。

この通常の左から右の折れ線グラフ（これをコピーしてテストするプロジェクトに貼り付けるだけでよい）を考えてみましょう。

<?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> 

右から左図にこれを変更するには、私は彼らが負にし、その後、最大値として、負の最小値とゼロを使用して軸に沿ってそれらをプロットする時間値のいくつかの反転を行います。私はまた、元のデータソースに合わせて再びポジティブにするために、ラベルに関数を実行します。

<?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

あなたのデータプロバイダの内容を元に戻しましたか？

Answer 3

グラフにどのようにデータを入力していますか？チャートに降順で並べ替えるデータを並べ替えると、右側に最も高く、最も低く表示されるようにすることができます。