flot – 显示没有间隙的时间轴

我正在尝试自定义jQuery Flot以消除时间轴上点之间的间隙。 看看顶部图片：

它显示了两天的数据，我打赌你发现了一夜。 我想要做的是摆脱图表中间的这个恼人的差距。 有什么建议怎么做？

Answer 1

太糟糕了我不能接受评论作为答案，因为来自Mark的链接的George Roberts的答案运作顺利。

所以我要做的是将flot的模式从’time’更改为null然后模拟时间轴。

我创建了两个数组：第一个包含图表数据，第二个包含时间戳：

for (var i=0; i 

时间轴仿真：

 // 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 

结果：

Answer 2

使用transform和inverseTransform ，它们是为这种情况设计的。 请参阅FLOT文档的以下部分。

“transform”和“inverseTransform”是您可以放入的回调，用于更改数据的绘制方式。 您可以设计一个函数来非线性地压缩或扩展轴的某些部分，例如抑制周末或用对数或其他方法压缩远点。 当Flot绘制绘图时，每个值首先通过变换函数。 这是一个例子，可以使用以下代码将x轴转换为自然对数轴：

 xaxis: { transform: function (v) { return Math.log(v); }, inverseTransform: function (v) { return Math.exp(v); } }