Apache flex 当Flex中没有可用数据时,如何消除时间序列数据图表中的空白?
我正在使用Flex绘制时间序列数据。数据范围为2002年至2009年,但在某些时期内(即2004年4月至2005年8月)无法获得数据。以下几行显示了我在图表中使用的标记:Apache flex 当Flex中没有可用数据时,如何消除时间序列数据图表中的空白?,apache-flex,charts,time-series,timeserieschart,Apache Flex,Charts,Time Series,Timeserieschart,我正在使用Flex绘制时间序列数据。数据范围为2002年至2009年,但在某些时期内(即2004年4月至2005年8月)无法获得数据。以下几行显示了我在图表中使用的标记: <mx:Canvas id="cp" backgroundColor="#ffffff" fontFamily="Verdana" fontSize="12" color="#093A89" fontWeight="bold" width="100%" height="100%" alpha="1" creationCo
<mx:Canvas id="cp" backgroundColor="#ffffff" fontFamily="Verdana" fontSize="12" color="#093A89" fontWeight="bold" width="100%" height="100%" alpha="1" creationComplete="init()">
<mx:LineChart id="cChart" showDataTips="true" paddingRight="40" paddingLeft="30" width="100%" height="85%">
<mx:verticalAxis>
<mx:LinearAxis id="linearAxis" baseAtZero="false" title="{parameterLabel}" minorInterval="0.5" interval="1.0"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{linearAxis}" fontSize="10">
<mx:axisStroke>
<mx:SolidColorStroke weight="6" color="#BBCCDD" alpha="1" caps="square"/>
</mx:axisStroke>
</mx:AxisRenderer>
</mx:verticalAxisRenderers>
<mx:horizontalAxis>
<mx:DateTimeAxis id="ca" minimum="{sDate}" maximum="{eDate}" title="Date" dataUnits="days" dataInterval="1" labelUnits="days"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{ca}" canDropLabels="true" fontSize="10" labelRotation="45">
<mx:axisStroke>
<mx:SolidColorStroke weight="6" color="#BBCCDD" alpha="1" caps="square"/>
</mx:axisStroke>
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>
<mx:series>
<mx:LineSeries id="l1" visible="false"/>
</mx:series>
</mx:LineChart>
<mx:Legend id="mylgn" horizontalCenter="0" bottom="32"/>
<s:Label id="lblChart1" text="{dataType} {parameterLabel} at {streamLabel}" horizontalCenter="0" bottom="20"/>
<s:Label id="lblChart2" text="{optionalText}" horizontalCenter="0" bottom="5"/>
下图显示了由上述代码创建的图表:
如您所见,没有数据的间隔存在间隙。有没有办法在没有数据的情况下删除/缩短间隔?这类数据的最佳做法是什么
如果您有任何想法或建议,我们将不胜感激这可以通过
数据提供程序的适配器来实现
若要显示缺失样本之间的水平线,必须向数据提供程序添加一个值等于上一个样本的附加样本
如果您有以下时间序列数据:
timestamp value
4/2004 3
8/2005 23
您将在2005年8月之前添加一个等于先前值3的额外样本
timestamp value
4/2004 3
7/2005 3 <-- insert sample
8/2005 23
静态适配器实用程序
package
{
import mx.collections.ArrayList;
public class TimeSeriesDataAdapter
{
public static function interpolate(data:ArrayList):ArrayList
{
var set:ArrayList = new ArrayList();
var timespan:Number;
// add first sample:
set.addItem(data[0]);
for (var i:uint = 1; i < data.length; i++)
{
// measure timestamp between current sample and last sample
timespan = TrendData(data[i]).timestamp.time - TrendData(data[i-1]).timestamp.time;
// if the timespan is greater than desired range (1-day), add a sample
if(timespan >= 86400000)
{
var trendData:TrendData = new TrendData();
// set timestamp just before sample
trendData.timestamp = new Date(TrendData(data[i]).timestamp.time - 1);
// set value to previous value
trendData.value = TrendData(data[i-1]).value;
set.addItem(trendData);
}
set.addItem(data[i]);
}
return set;
}
}
}
包
{
导入mx.collections.ArrayList;
公共类TimeSeriesDataAdapter
{
公共静态函数插值(数据:ArrayList):ArrayList
{
变量集:ArrayList=新的ArrayList();
var timespan:数字;
//添加第一个示例:
set.addItem(数据[0]);
对于(变量i:uint=1;i=86400000)
{
var trendData:trendData=new trendData();
//在采样之前设置时间戳
trendData.timestamp=新日期(trendData(数据[i]).timestamp.time-1);
//将值设置为上一个值
trendData.value=趋势数据(数据[i-1])值;
set.addItem(趋势数据);
}
集合.增补项(数据[i]);
}
返回集;
}
}
}
数据可视化实施
<?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">
<fx:Script>
<![CDATA[
import mx.collections.ArrayList;
[Bindable]
[ArrayElementType("TrendData")]
public var data:ArrayList
]]>
</fx:Script>
<mx:LineChart dataProvider="{TimeSeriesDataAdapter.interpolate(data)}" />
</s:Application>
这是通过数据提供程序的适配器实现的
若要显示缺失样本之间的水平线,必须向数据提供程序添加一个值等于上一个样本的附加样本
如果您有以下时间序列数据:
timestamp value
4/2004 3
8/2005 23
您将在2005年8月之前添加一个等于先前值3的额外样本
timestamp value
4/2004 3
7/2005 3 <-- insert sample
8/2005 23
静态适配器实用程序
package
{
import mx.collections.ArrayList;
public class TimeSeriesDataAdapter
{
public static function interpolate(data:ArrayList):ArrayList
{
var set:ArrayList = new ArrayList();
var timespan:Number;
// add first sample:
set.addItem(data[0]);
for (var i:uint = 1; i < data.length; i++)
{
// measure timestamp between current sample and last sample
timespan = TrendData(data[i]).timestamp.time - TrendData(data[i-1]).timestamp.time;
// if the timespan is greater than desired range (1-day), add a sample
if(timespan >= 86400000)
{
var trendData:TrendData = new TrendData();
// set timestamp just before sample
trendData.timestamp = new Date(TrendData(data[i]).timestamp.time - 1);
// set value to previous value
trendData.value = TrendData(data[i-1]).value;
set.addItem(trendData);
}
set.addItem(data[i]);
}
return set;
}
}
}
包
{
导入mx.collections.ArrayList;
公共类TimeSeriesDataAdapter
{
公共静态函数插值(数据:ArrayList):ArrayList
{
变量集:ArrayList=新的ArrayList();
var timespan:数字;
//添加第一个示例:
set.addItem(数据[0]);
对于(变量i:uint=1;i=86400000)
{
var trendData:trendData=new trendData();
//在采样之前设置时间戳
trendData.timestamp=新日期(trendData(数据[i]).timestamp.time-1);
//将值设置为上一个值
trendData.value=趋势数据(数据[i-1])值;
set.addItem(趋势数据);
}
集合.增补项(数据[i]);
}
返回集;
}
}
}
数据可视化实施
<?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">
<fx:Script>
<![CDATA[
import mx.collections.ArrayList;
[Bindable]
[ArrayElementType("TrendData")]
public var data:ArrayList
]]>
</fx:Script>
<mx:LineChart dataProvider="{TimeSeriesDataAdapter.interpolate(data)}" />
</s:Application>
我用Jason的答案解决了图表中的差距问题。然而,为了使代码适合我的应用程序,我应用了以下更改。
1-我将ArryList替换为ArrayCollection
2-我没有使用TrendData类
3-由于我的日期文件是字符串,我必须先将其转换为日期
4-我认为7天或更长的时间是一个间隔
5-在创建多余的点之前,我必须对我的ArrayCollection进行排序
以下显示了TimeSeriesDataAdapter.interpolate函数的我的版本:
public static function interpolate(data:ArrayCollection):ArrayCollection
{
var set:ArrayCollection = new ArrayCollection();
var timespan:Number;
var oneDayTime:Number = 86400000; // 1000*60*60*24 = 1 day
for (var j:uint = 1; j < data.length; j++)
{
// measure timestamp between current sample and last sample
data[j].formattedDate = DateField.stringToDate(data[j].Date,"MM/DD/YYYY");
data[j].time = data[j].formattedDate.time;
}
var dataSortField:SortField = new SortField();
dataSortField.name = "time";
var numericDataSort:Sort = new Sort();
numericDataSort.fields = [dataSortField];
data.sort = numericDataSort;
data.refresh();
// add first sample:
set.addItem(data[0]);
for (var i:uint = 1; i < data.length; i++)
{
// measure timestamp between current sample and last sample
timespan = data[i].time - data[i-1].time;
// if the timespan is greater than desired range (7-days), add a sample
if(timespan >= oneDayTime*7)
{
var trendData:Object = new Object();
var timestamp:Date = new Date();
trendData = data[i-1];
// set timestamp just before sample
timestamp.time = data[i].time - 1;
trendData.Date = DateField.dateToString(timestamp,"MM/DD/YYYY");
set.addItem(trendData);
}
set.addItem(data[i]);
}
return set;
}
公共静态函数插值(数据:ArrayCollection):ArrayCollection
{
变量集:ArrayCollection=new ArrayCollection();
var timespan:数字;
var onedayday:Number=86400000;//1000*60*60*24=1天
对于(变量j:uint=1;j=一天*7)
{