Apache flex 带可变颜色线的弹性折线图

我有一个相当简单的需要创建一个折线图。我想绘制的数据是基于单个每日数据点的。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>

01/14/2013
80.6
G
01/15/2013
74.6
A.
01/21/2013
79.4
G
01/22/2013
67.7
A.

诀窍是，我想根据指示中的值改变绘制线的颜色

换句话说，如果我的第一个点是在2013年1月14日，我希望该点和下一个点之间的线的颜色基于指示，因此上面的示例数据将为琥珀色。然后从第二个点到第三个绿色点，再从第三个点到第四个琥珀色点

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

---

有没有人见过任何能够实现此功能的组件，或者有没有人知道我如何使用默认flex 4.6组件实现此功能？

我有一个想法，希望它能帮助您

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

然后你浏览所有的部分并将它们分别添加到图表中

您需要两个类来保存有关“点”和“零件”的信息

//第三部分

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

//朋克塔斯

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>

01/14/2013
80.6
G
01/15/2013
74.6
A.
01/21/2013
79.4
G
01/22/2013
67.7
G
01/24/2013
47.7
A.
01/25/2013
87.7
G

我不认为图表组件可以做到这一点，但您可以自己通过一个或一些连接的s来绘制图形。这非常有用。不要使用

CategoryAxis

使用

DateTimeAxis

设置最大和最小时间，无需

xAxis:ArrayCollection