Flex：反转 LinearAxis 值

Question

我有一个每隔几秒更新一次的折线图，类似于您在 Windows 任务管理器中看到的折线图。 该图表从右向左排列，右侧为最新数据，然后向左排列。 如何反转 X 轴的值，使最低值位于右侧，最高值位于左侧？ 这是一个线性轴。

我尝试将其设为 CategoryAxis 并手动输入数字，但这并不能按应有的方式工作（标签未与刻度线对齐）。

或者，有没有办法让 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

您如何填充图表中的数据？ 如果按降序对图表中的数据进行排序，则可以将最高值显示在左侧，最低值显示在右侧。