具有可变彩色线条的 flex 折线图

Question

我有一个相当简单的需求来创建折线图。我要绘制的数据基于单个每日数据点。 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 日，我希望该点和下一个点之间的线的颜色基于指示，因此上面的示例数据将是琥珀色。然后从第二个点到第三个绿色，再从第三个点到第四个琥珀色。

我真的很喜欢 amstock 图表，但它们似乎缺少此功能。

有没有人见过任何能够做到这一点的组件，或者知道如何使用默认的 flex 4.6 组件来做到这一点？

Answer 1

我有个想法，希望对你有帮助。

您可以处理您的数据集并从中形成一个新的数据集，以便每两个点代表一个折线图段的单个数据源。

然后您浏览所有细分并将它们单独添加到图表中。

你需要两个类来保存关于“points”和“parts”的信息

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