Graphique à lignes flexibles avec ligne de couleur variable

Question

J'ai un besoin assez simple de créer un graphique linéaire. Les données que j'aimerais représenter sont basées sur un seul point de données quotidien. xml exemple de données :

<?xml version="1.0"?>
<dataset>
    <data>
        <date>01/14/2013</date>
        <number>80.6</number>
        <indication>G</indication>
    </data>
    <data>
        <date>01/15/2013</date>
        <number>74.6</number>
        <indication>A</indication>
    </data>
    <data>
        <date>01/21/2013</date>
        <number>79.4</number>
        <indication>G</indication>
    </data>
    <data>
        <date>01/22/2013</date>
        <number>67.7</number>
        <indication>A</indication>
    </data>
</dataset>

L'astuce consiste à modifier la couleur de la ligne tracée en fonction de la valeur indiquée.

En d'autres termes, si mon premier point est le 14/01/2013, je veux que la couleur de la ligne entre ce point et le suivant soit basée sur l'indication, donc avec les données de l'exemple ci-dessus, ce serait l'orange. Ensuite, entre le deuxième et le troisième point, la ligne sera verte et entre le troisième et le quatrième point, elle sera de nouveau orange.

J'aime beaucoup les graphiques d'amstock, mais il semble que cette fonctionnalité leur fasse défaut.

Quelqu'un a-t-il vu des composants capables de faire cela ou a-t-il des idées sur la façon dont je pourrais le faire avec les composants flex 4.6 par défaut ?

Answer 1

J'ai une idée, j'espère qu'elle vous aidera.

Vous pouvez traiter votre ensemble de données et en former un nouveau, de sorte que chaque point représente une source de données unique pour un segment de graphique linéaire.

Ensuite, vous passez en revue tous vos segments et les ajoutez séparément au graphique.

Vous avez besoin de deux classes pour enregistrer les informations relatives aux "points" et aux "pièces"

//Part.as

public class Part
{
    public var col:Number;
    public var punkts:ArrayCollection;
}

//Punkt.as

public class Punkt
{
    public var date:String;
    public var number:Number;

    public function Punkt(date:String, number:Number)
    {
        this.date = date;
        this.number = number;
    }
}

/Voici votre demande

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           minWidth="955" minHeight="600" 
           creationComplete="init()">

<fx:Declarations>
    <fx:Model id="myData">
        <dataset>
            <data>
                <date>01/14/2013</date>
                <number>80.6</number>
                <indication>G</indication>
            </data>
            <data>
                <date>01/15/2013</date>
                <number>74.6</number>
                <indication>A</indication>
            </data>
            <data>
                <date>01/21/2013</date>
                <number>79.4</number>
                <indication>G</indication>
            </data>
            <data>
                <date>01/22/2013</date>
                <number>67.7</number>
                <indication>G</indication>
            </data>
            <data>
                <date>01/24/2013</date>
                <number>47.7</number>
                <indication>A</indication>
            </data>
            <data>
                <date>01/25/2013</date>
                <number>87.7</number>
                <indication>G</indication>
            </data>
        </dataset>
    </fx:Model>
</fx:Declarations>

<fx:Script>
    <![CDATA[
        import com.Part;
        import com.Punkt;

        import mx.charts.series.LineSeries;
        import mx.collections.ArrayCollection;
        import mx.graphics.SolidColorStroke;
        import mx.graphics.Stroke;
        import mx.utils.ObjectProxy;

        [Bindable]private var xAxis:ArrayCollection = new ArrayCollection();
        [Bindable]private var dp:ArrayCollection = new ArrayCollection();

        private function init():void
        {
            var prevCol:Number = 0x000000;

            var len:int = myData.data.length;
            var item:ObjectProxy;
            var i:int;

            for (i = 0; i < len; i++)
            {
                item = myData.data[i];
                xAxis.addItem(item.date);
            }

            for (i = 0; i < len - 1; i++)
            {
                item = myData.data[i];
                var part:Part = new Part();

                switch (item.indication)
                {
                    case "A":
                        part.col = 0xe48701;
                        break;
                    case "G":
                        part.col = 0xa5bc4e;
                        break;
                }

                part.punkts = new ArrayCollection();

                part.punkts.addItem(new Punkt(item.date, item.number));

                item = myData.data[i + 1];
                part.punkts.addItem(new Punkt(item.date, item.number));

                dp.addItem(part);
            }

            var mySeries:Array=new Array();

            for each (var part:Part in dp)
            {
                var lineSeries:LineSeries = new LineSeries();
                lineSeries.dataProvider = part.punkts;
                lineSeries.xField = "date";
                lineSeries.yField = "number";

                lineSeries.setStyle('lineStroke', new SolidColorStroke(part.col, 3, 1));

                mySeries.push(lineSeries);
            }

            lc.series = mySeries;
        }

    ]]>
</fx:Script>

<mx:LineChart id="lc" x="184" y="55">
    <mx:horizontalAxis>
        <mx:CategoryAxis dataProvider="{xAxis}"/>
    </mx:horizontalAxis>
</mx:LineChart>

</s:Application>