带有可变彩色线条的柔性折线图

问题描述

我有一个相当简单的需求来创建折线图.我想要绘制的数据基于单个每日数据点.xml数据示例:

Ive got a rather simple need to create a line chart. The data that I would like to chart is based on a single daily datapoint. xml example of data:

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

诀窍是我想根据指示值更改绘制的线条颜色.

The trick is that I want to alter the plotted line color based on the value in indication.

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

In other words if my first point is on 01/14/2013 I want the color of the line between that point and the next to be based on the indication so with the example data above it would be amber. Then from the second point to the 3rd green and from the thirs to the fourth amber again.

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

I really like the amstock charts but they seem to be lacking this functionality.

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

Has anyone seen any components capable of this or have ideas how I could do it with default flex 4.6 components?

推荐答案

我有个想法，希望能帮到你.

I have an idea, i hope it will help you.

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

You can process your dataset and form a new one from it, so that each two points represent a single datasource for one line chart segment.

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

Then you go through all your segments and add them separate to the chart.

你需要两个类来保存关于点"和部分"的信息

You need two classes to save informations about "points" and "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>

这篇关于带有可变彩色线条的柔性折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！