apache-flex - 可変色の線を含むフレックス折れ線グラフ

Question

折れ線グラフを作成する必要があるのはかなり単純です。グラフにしたいデータは、1 つの日次データポイントに基づいています。xml データの例:

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

トリックは、指示の値に基づいてプロットされた線の色を変更したいということです。

つまり、最初のポイントが 2013 年 1 月 14 日にある場合、そのポイントと次のポイントの間の線の色を指示に基づいて設定したいので、上記の例のデータでは琥珀色になります。次に、2 番目のポイントから 3 番目のグリーンまで、3 番目から 4 番目のアンバーまで。

amstock チャートはとても気に入っていますが、この機能が欠けているようです。

これが可能なコンポーネントを見た人はいますか、またはデフォルトのフレックス 4.6 コンポーネントでどのようにそれを行うことができるか考えていますか?

Answer 1

アイデアがあります。お役に立てば幸いです。

データセットを処理し、そこから新しいデータセットを作成して、2 つのポイントがそれぞれ 1 つの折れ線グラフ セグメントの 1 つのデータソースを表すようにすることができます。

次に、すべてのセグメントを調べて、それらを別々にチャートに追加します。

「点」と「部品」の情報を保存するには、2 つのクラスが必要です。

//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;
    }
}

//ここにあなたのアプリケーションがあります

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