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

它显示了两天的数据,我敢打赌您会发现当晚。我要做的是摆脱图表中间的这一令人讨厌的空白。任何建议如何做到这一点?

最佳答案

太糟糕了,我不能接受评论作为答案,因为Mark链接中的George Roberts的答案很正常。

因此,我要做的是将float的模式从“时间”更改为null,然后模拟时间轴。

我创建了两个数组:第一个数组包含图形数据,第二个数组包含时间戳:

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 }

结果:

09-10 10:25
查看更多