flot - показать ось времени без пробелов

Question

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

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

Answer 1

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

Так что мне нужно было изменить режим flot с 'time ', чтобы обнулить и затем эмулировать ось времени.

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

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 рисует график, каждое значение сначала проходит через функция преобразования. Вот пример, ось х можно повернуть в натуральную логарифмическую ось со следующим кодом:

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