Flex：反轉LinearAxis值

Question

我有一個折線圖，每隔幾秒鐘更新一次，與您在Windows任務管理器中看到的類似。圖表從右到左，最新的數據在右側，向左。我如何反轉X軸的值，使最低值在右邊，最高在左邊？這是一個LinearAxis。

我試着讓它成爲一個CategoryAxis，並且手動輸入數字，但是這並不是它應該的方式（標籤與ticks不一致）。

或者，有沒有辦法讓CategoryAxis中的標籤與ticks一致？

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

您是否嘗試過顛倒您dataprovider的內容。

Answer 3

你如何填充圖表中的數據？如果您按照降序對數據進行排序，則可以使其顯示爲左側最高，右側最低。