我正在尝试自定义 jQuery Flot 以消除时间轴上点之间的间隙。看上面的图片:
它显示了两天的数据,我敢打赌你会发现晚上的数据。我想做的就是消除图表中间这个令人讨厌的间隙。有什么建议如何做到这一点吗?
最佳答案
太糟糕了,我不能接受评论作为答案,因为马克链接中乔治·罗伯茨的回答工作顺利。
所以我要做的就是将浮点的模式从“时间”更改为空,然后模拟时间轴。
我创建了两个数组:第一个包含图表数据,第二个包含时间戳:
for (var i=0; i<json.length; i++ ) {
dotsData.push( [i, json[i].value] );
ticks.push( json[i].date );
}
}
时间轴仿真:
// flot options
... xaxis: { tickFormatter: function(val) { return formTicks(val, ticks) } } ...
// formTicks function
function formTicks(val, ticksArr) {
var tick = ticksArr[val];
if ( tick != undefined ) {
tick = new Date( tick );
var hours = tick.getHours(),
minutes = tick.getMinutes();
tick = hours+':'+minutes;
}
else { tick = '' }
return tick
}
它解决了问题,但是很难区分某一天和另一天,所以我添加了标记:
var markings = [],
firstDay = new Date( ticks[0] ).getDate();
for (var i=1; i<ticks.length; i++) {
var loopDay = new Date( ticks[i] ).getDate();
if ( loopDay != firstDay ) {
var marking = {
color: '#000000',
lineWidth: 1,
xaxis: { from: i, to: i }
}
markings.push( marking )
firstDay = loopDay; // loop through all days
}
}
// flot options
grid: { markings: markings }
结果:
关于jquery - flot - 显示没有间隙的时间轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7204232/