Flot - показать временную ось без пробелов

Я пытаюсь настроить jQuery Flot, чтобы удалить промежутки между точками по оси времени. Посмотрите на верхнее изображение:

Он показывает данные в течение двух дней, и я уверен, вы заметили ночь. Я хочу сделать это, чтобы избавиться от этого досадного разрыва в середине графика. Любые предложения, как это сделать?

Ответ 1

Слишком плохо, я не могу принять комментарий как ответ, так как ответ Джорджа Робертса из ссылки Марка работал гладко.

Итак, мне нужно было изменить режим флота от "времени" до нуля, а затем эмулировать временную ось.

Я создал два массива: первый с данными для графика, а второй с отметками времени:

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 }

Результат:

Ответ 2

Используйте преобразование и inverseTransform, которые были предназначены для таких ситуаций. См. Следующую часть документации FLOT.

"transform" и "inverseTransform" - это обратные вызовы, которые вы можете изменить способ обработки данных. Вы можете создать функцию для сжимают или расширяют определенные части оси нелинейно, например. подавлять выходные или сжимать удаленные точки с логарифмом или другие средства. Когда Флот рисует график, каждое значение сначала переносится функция преобразования. Здесь пример, ось x может быть повернута в естественную логарифмическую ось со следующим кодом:

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