float - 显示没有间隙的时间轴

Question

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

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

Answer 1

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

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

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

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 }

结果：

Answer 2

使用专为此类情况设计的 transform 和 inverseTransform。请参阅 FLOT 文档的以下部分。

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

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