用变色线折曲折线图 [英] flex line chart with variable colored line
本文介绍了用变色线折曲折线图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<？xml version =1.0？>
< dataset>
< data>
< date> 01/14/2013< / date>
< number> 80.6< / number>
<指示> G< /表示>
< / data>
< data>
< date> 01/15/2013< / date>
< number> 74.6< / number>
<指示> A< /表示>
< / data>
< data>
< date> 01/21/2013< / date>
< number> 79.4< / number>
<指示> G< /表示>
< / data>
< data>
< date> 01/22/2013< / date>
< number> 67.7< / number>
<指示> A< /表示>
< / data>
< / dataset>
诀窍是我想根据指示值来改变绘制线的颜色。换句话说，如果我的第一点是在2013年1月14日，我希望该点和下一个之间的线的颜色是基于指示，所以用例子上面的数据是琥珀色的。然后从第二个点到第三个绿色，再从thirs到第四个琥珀。
我非常喜欢amstock图表，但他们似乎缺乏这个功能。
有没有人看到任何组件能够做到这一点，或有想法，我怎么能用默认的Flex 4.6组件？ h2_lin>解决方案
我有一个想法，我希望它会帮助你。
你可以处理你的数据集并形成一个新的这样，每两个点代表一个折线图分段的单一数据源。
然后你浏览所有的分段，并将它们分开添加到图表中。 >
您需要两个类来保存关于点和零件的信息
// Part.as
public class Part
{
public var col：Number;
public var punkts：ArrayCollection;
$ / code $ / pre
$ b pre $ p
public class Punkt
{
public var date：String;
public var number：Number;
public function Punkt（date：String，number：Number）
{
this.date = date;
this.number = number;
$ p $这里是你的应用程序
<？xml version =1.0encoding =utf-8？>
xmlns：s =library：//ns.adobe.com/flex/spark
xmlns：mx =library：//ns.adobe.com/flex/mx
minWidth =955minHeight =600
creationComplete =init（）> ;
< fx：声明>
< fx：Model id =myData>
< dataset>
< data>
< date> 01/14/2013< / date>
< number> 80.6< / number>
<指示> G< /表示>
< / data>
< data>
< date> 01/15/2013< / date>
< number> 74.6< / number>
<指示> A< /表示>
< / data>
< data>
< date> 01/21/2013< / date>
< number> 79.4< / number>
<指示> G< /表示>
< / data>
< data>
< date> 01/22/2013< / date>
< number> 67.7< / number>
<指示> G< /表示>
< / data>
< data>
< date> 01/24/2013< / date>
< number> 47.7< / number>
<指示> A< /表示>
< / data>
< data>
< date> 01/25/2013< / date>
< number> 87.7< / number>
<指示> G< /表示>
< / data>
< / dataset>
< / fx：模型>
< / fx：声明>
< fx：Script>
<！[CDATA [
import com.Part;
import com.Punkt;
导入mx.charts.series.LineSeries;
导入mx.collections.ArrayCollection;
导入mx.graphics.SolidColorStroke;
导入mx.graphics.Stroke;
导入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;
（i = 0; i< len; i ++）
{
item = myData.data [i];
xAxis.addItem（item.date）;
（i = 0; i< len - 1; i ++）
{
item = myData.data [i]
var part：Part = new Part（）;
switch（item.indication）
{
caseA：
part.col = 0xe48701;
break;
caseG：
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（）;
（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 =lcx =184y =55>
< mx：horizontalAxis>
< mx：CategoryAxis dataProvider ={xAxis}/>
< / mx：horizontalAxis>
< / mx：LineChart>
< / s：Application>
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.
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.
I really like the amstock charts but they seem to be lacking this functionality.
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;
}
}
//here is your application
<?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>
这篇关于用变色线折曲折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
