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

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

点击此处查看本实例的效果。是不是和http://www.riafan.com/advanced-linearaxis很相似呀？

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

else if (o.mode == 'timeEx') { 
  // 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中参照间距是相对的，而此处是绝对的。如下面代码：

function filterTicks(graph, axis){
  if(axis.options.mode == 'timeEx'){
    var w = axis.maxLabel.width;
    //filter the labels
    var len = axis.ticks.length;
    if(len > 3){
    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) < 9 * nextTick.label.length)
          axis.ticks.splice(i - 1, 1);
        }
        //remove the last label
        if(i == len - 1){
          if(graph.plotWidth - axis.d2p(nextTick.v) < 3 * nextTick.label.length){
            axis.ticks.pop();
          }
        }
        //remove the first label
        if(i == 1){
          if(axis.d2p(preTick.v) < w / 3 ){
            axis.ticks.shift();
          }
        }
      }
    }
    len = axis.ticks.length;
    xBoxWidth = graph.plotWidth / len;
  }
}

使用方法很简单，将xaxis的mode指定为自定义的线性轴就行了。