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指定为自定义的线性轴就行了。