艺虎动画 > DateTimeAxis高级应用

DateTimeAxis高级应用

翼虎动漫   2011-2-25

DateTimeAxis可检查轴的最小值和最大值之间的范围,以此选择最合理的单位用于标记轴。但对于以分钟为数据 单位的图表,往往会出现许多问题,本文将以一个实例来谈谈解决之法。

原因:打开stock.xml,可以看到该文件中仅包含每天上午9点到下午3点之间的历史数据,而且有两天还是工作日。DateTimeAxis不 会筛选禁用的数据,仅显示与图表中有用的数据。

解决办法:使用disabledDays和disabledRanges属性每周中禁用的天数以及禁用的日期范围。如下面代码:

disabledDays = [0,6];
override public function get disabledRanges():Array
{
 var diff:int = new Date(maximum.getTime() - minimum.getTime()).date;
 
 var arr:Array = new Array();
 
 if(dataUnits == "minutes" || dataUnits == "hours")
 {
  for(var i:int = 0; i < diff; i++)
  {  
   var startDate:Date = new Date(minimum.fullYear, 
    minimum.month, minimum.date + (i), 15, 0);
   var endDate:Date = new Date(minimum.fullYear, 
    minimum.month, minimum.date + (i + 1), 9, 0);
   var range:DateRange = new DateRange( startDate, endDate);
   arr.push(range);
  }
 }
  
 else
 {
  arr = super.disabledRanges;
 }
 return arr; 
}

实际上,变量diff的值一般不会超过5,因此我们可以取date属性而不用除以24*60*60*1000。

注意:如果是用Flex SDK 3.3以下的SDK来编译,图表会向左偏移,这是Flex SDK的一个Bug。详见http://bugs.adobe.com/jira/browse/FLEXDMV-963

问题二: 日期轴标签全部都是以小时为单位,无醒目间隔。点击查看http://www.riafan.com/flex/datetimeaxis/reducelabels.html

原因:日期轴标签使用了自动计算的日期格式,且不是LocalTime,因此我们之前设定displayLocalTime="true"。

解决办法:设定labelFunction()或覆写formatDays()、formatMinutes()等方法。如下面代码:

override protected function formatDays(d:Date, previousValue:Date, axis:DateTimeAxis) : String
{
 var df:DateFormatter = new DateFormatter();
 df.formatString="MMM D";
 return df.format(d);
}
override protected function formatMinutes(d:Date, previousValue:Date, axis:DateTimeAxis) : String
{
 var df:DateFormatter = new DateFormatter();
 df.formatString="L A";
 var dt:Date = new Date(labelMinimum);
 var h:Number = dt.hours;
 
 if(dt.minutes > 0 || dt.seconds > 0)
 {
  h += 1;
 }
 
 if(d.hours == h)
 {
  return formatDays(d, previousValue, axis)
 }
 return df.format(d);
}

在formatMinutes()方法中,我们使用了一点小技巧让每天的第一个日期轴标签以天为单位显示。