浮动-显示时间轴没有间隙 [英] flot - show time axis without gaps
问题描述
我正在尝试自定义jQuery Flot以消除时间轴上的点之间的间隙.看上面的图片:
I'm trying to customize jQuery Flot to remove gaps between dots on time axis. Look at the top image:
它显示了两天的数据,我敢打赌你当晚.我要做的是摆脱图表中间的这一令人讨厌的空白.有什么建议怎么做吗?
It shows the data for two days, and I bet you spot the night. What I want to do is to get rid of this annoying gap in the middle of the chart. Any suggestions how to do this?
推荐答案
太糟糕了,我无法接受评论作为答案,因为Mark链接中的George Roberts的答案很正常.
Too bad I can't accept a comment as an answer, since the answer from George Roberts from Mark's link worked smoothly.
因此,我要做的是将float的模式从时间"更改为null,然后模拟时间轴.
So what I had to do is to change the mode of the flot from 'time' to null and then emulate a time axis.
我创建了两个数组:第一个数组包含图形数据,第二个数组包含时间戳:
I've created two arrays: the first one with data for the graph and the second one with timestamps:
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
}
它可以解决问题,但很难区分一天,因此我添加了标记:
It solves the problem, but it's hard to distinguish one day from another, so I added markings:
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 }
结果:
这篇关于浮动-显示时间轴没有间隙的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!