Flex: valeurs LinearAxis Inversion

Question

J'ai un tableau de ligne qui est mis à jour tous les Untel secondes, semblable à celui que vous voyez dans le Gestionnaire des tâches Windows. Le tableau va de droite à gauche, avec les données les plus récentes sur la droite, et en allant vers la gauche. Comment puis-je inverser les valeurs de l'axe X de sorte que la valeur la plus basse est à droite et le plus à gauche? Il est un LinearAxis.

J'ai essayé de faire un CategoryAxis et de mettre les chiffres manuellement, mais cela ne fonctionne pas comme il le devrait (les étiquettes ne sont pas alignés avec les tiques).

Ou, est-il un moyen d'avoir les étiquettes dans un CategoryAxis sont alignées avec les tiques?

Answer 1

Je l'ai regardé dans ce un Je ne peux pas voir un moyen simple de retournement de l'axe. Cependant, j'ai une solution qui fonctionne parfaitement bien et est relativement élégante donnant l'omission d'un bien pour le faire pour vous.

Considérons donc ce tableau normale de la ligne de gauche à droite (devrait juste être en mesure de copier et coller dans un projet pour tester).

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

Pour changer à un graphique de droite à gauche, je fais une inversion des valeurs de temps pour les rendre négatifs et puis tracer le long d'un axe qui utilise un minimum négatif et zéro au maximum. J'ai aussi alors exécuter une fonction sur les étiquettes pour les rendre à nouveau positif pour adapter la source de données d'origine.

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

Avez-vous essayé inverser le contenu de votre dataprovider.

Answer 3

Comment vous peuplez les données dans le tableau? Si vous triez les données vont dans le tableau par ordre décroissant, vous pouvez l'afficher avec le plus haut sur la gauche et le plus bas à droite.