使用Flotr自定义线性轴来显示时间

Flotr的轴默认为线性轴(mode="normal")。为什么要使用Flotr自定义线性轴来显示时间呢？正如上一篇文章所言：如果使用时间轴，当时间范围为五天时，会在当天与下一天之间绘制一大段多余的 连接线，而且轴标签有时会找不到对应的数据点而缺少实际意义。因此，有必要自定义线性轴而不是使用时间轴。

点击此处查看本实例的效果。是不是和http://www.riafan.com/default.asp?id=224很相似呀？

是的，连算法都很相似。这里的所有日期标签是用axis.ticks数组来管理的，同样在一种日期格式下，当前标签与下一日期标签和上一标签的文本不相同时才显示出来。请参考下面代码：

else if (o.mode == 'timeEx') {
  var data = hitData;
  var tu = Flotr.Date.timeUnits,
  span = data[axis.max][0] - data[axis.min][0];
  $H(tu).each(function(pair) { 
    var v = Math.floor(span/pair.value);
    // less than 3 times
    if(0 < v && v < 72){
      t = Flotr.Date.timeUnits[pair.key];
      axis.tickUnit = pair.key;
    }
  });  
  tick_dateFormat = Flotr.Date.getFormat(t, span); 
  // store all possible ticks.
  var preLabel;
  var nextLabel;
  var r = axis.max - axis.min; 
  for(i = 0; i < r; ++i){
    preLabel = o.tickFormatter(i);
    nextLabel = o.tickFormatter(i + 1);
    if(nextLabel != preLabel)
      axis.ticks.push({ v: i + 1, label: nextLabel });
  }
}

当两个日期标签间隔太近容易重叠时，我们也用了类似方法来移除，只不过在Flex中参照间距是相对的，而此处是绝对的。如下面代码：

//filter the labels
var len = axis.ticks.length;
if(len > 4){
  var preTick;
  var nextTick;
  for (i = len - 1; i > 0; i--) {
    preTick = axis.ticks[i - 1];
    nextTick = axis.ticks[i];
    //remove the middle label
    if(nextTick){
      if(axis.d2p(nextTick.v) - axis.d2p(preTick.v) < 8 * preTick.label.length){
	axis.ticks.splice(i - 1, 1);
      }
    }
  }
}

使用方法很简单，将xaxis的mode指定为自定义的线性轴就行了。另外，本实例中不得不命名两个全局的变量hitData和tick_dateFormat，为了简单我们在flotr.js中引用了它们。当然，你可以将它 们封闭到flotr.js中。

上一篇: 使用Flotr绘制股票图
下一篇: 用CSS3移除点击交互元素的高亮背景
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: ChartChart
相关日志: