float - 显示没有间隙的时间轴 [英] 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.

所以我要做的就是将浮点模式从时间"更改为空，然后模拟时间轴.

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 }

结果:

这篇关于float - 显示没有间隙的时间轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！