Question

我有一个每秒都会更新的折线图，类似于你在Windows的“任务管理器”中看到的那个。图表从右到左，最新数据在右边，向左。如何反转X轴的值，使最低值在右侧，最高值在左侧？这是一个LinearAxis。

我尝试将其设为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

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

Flex：反转LinearAxis值

3 个答案: