float - показывать ось времени без пропусков

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

разбитый флот

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


person Daniel J F    schedule 26.08.2011    source источник
comment
Это интересно: группы. google.com/group/flot-graphs/browse_thread/thread/   -  person Mark    schedule 27.08.2011


Ответы (2)


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

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

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

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 }

Результат:

Хорошо выглядящий флот

person Daniel J F    schedule 27.08.2011
comment
спасибо, что вернулись и опубликовали свое полное решение. Когда SO позволяет вам принять свой собственный ответ в качестве решения. - person Mark; 27.08.2011

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

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

xaxis: {
        transform: function (v) { return Math.log(v); },
        inverseTransform: function (v) { return Math.exp(v); }
       }
person Neil    schedule 26.08.2011
comment
Я уже пробовал это. Я использовал function (v) { if ($.inArray(v, timestamps) > -1){return v} else {return null} }. Он убирает галочки в зазоре, но зазор все равно есть. - person Daniel J F; 26.08.2011
comment
Дэниел, не могли бы вы опубликовать свой код, чтобы я мог видеть вызов FLOT и отображаемые данные? - person Neil; 26.08.2011
comment
Даниэль, я только что провел свой собственный эксперимент с использованием xaxis: transform и, боюсь, я должен с вами согласиться. Кажется, он не делает то, что должен делать. Извините не могу помочь!!! С уважением - person Neil; 26.08.2011
comment
Спасибо за попытку в любом случае, Нил. - person Daniel J F; 26.08.2011