Проблема с панорамированием оси jQuery Flot на основе времени

Я возился, сделал небольшую диаграмму с помощью Flot и некоторых его плагинов. Цель состоит в том, чтобы предоставить диаграмму, отслеживающую базальную температуру тела, с датой в течение дня по оси x и градусами по оси y. Панорамирование сместит ось X, чтобы вы могли видеть предыдущие даты и т. д. Щелчок приведет к появлению новой точки, привязанной к сетке.

Сетка на оси времени при панорамировании не перемещается. Это происходит, когда я меняю тип оси на нормальный. Я действительно хочу, чтобы вся сетка двигалась, потому что теперь ряды линий как бы «плавают» по сетке. Кто-нибудь знает, как это сделать? Я что-то пропустил в опциях?

Это сложнее объяснить, чем увидеть, поэтому fsfiddle предоставил: http://jsfiddle.net/jorgthuijls/caM3q/1/

Изменение поведения вызывается опцией mode: 'time' на оси X (строка 24 скрипта).

Фрагмент кода, на который стоит обратить внимание:

        xaxis: {
            show: true,
            min: firstDay,
            max: lastDay,
            ticks: 31,
            mode: 'time',
            timezone: 'browser',
            timeformat: '%d. %m'
        },

изменить это на

        xaxis: {
            show: true,
            min: firstDay,
            max: lastDay,
            ticks: 31,
        },

и посмотрите, что получится, двигая график после добавления нескольких точек.

Очень признателен!


jquery flot panning
person Jorg    schedule 21.04.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это сочетание двух вещей:

  1. В версии 0.8.0 была ошибка, которую мы только что исправили, поэтому, если вы попробуете с jquery.flot.time.js от мастера, вы сразу заметите улучшение.

  2. Даже с исправлением галочки все равно будут немного прыгать. Это потому, что у вас достаточно большой диапазон, поэтому тики появляются только каждые ~ 3 дня. Однако внутренне генератор тиков по-прежнему считает один день минимальным интервалом. Поэтому он пересчитывается, как только вы перемещаетесь на день, даже если это составляет только треть размера интервала тиков.

Обычно вы можете обойти эту проблему, назначив подходящее значение minTickSize; [5, 'day'], например, чтобы убедить генератор тиков в том, что ему не нужно пересчитывать. Это работает лучше всего, когда вы заранее знаете размеры участка.

person DNS    schedule 22.04.2013
comment
Спасибо за это! Кажется, это решило проблему с прокручивающейся сеткой. Я намерен показать месяц полностью, то есть примерно 30 линий сетки, по одной на каждый день. Это будет minTickSize: [1,'day']? Пока не знаю, я только что поставил количество тиков на 30. - person Jorg; 23.04.2013
comment
С minTickSize Flot обычно выбирает больший интервал. Если вы вместо этого используете tickSize: [1, "day"], это будет ближе к тому, что вы хотите. Однако убедитесь, что вы понимаете, сколько места занимают 30 тиков. При ширине 400 пикселей 8-10 тиков — это максимум, который может удобно уместиться; чтобы вместить 30, вам понадобится ширина не менее 1200. - person DNS; 23.04.2013
comment
Да, я уже выбрал 1200, что очень хорошо. Я отрегулировал скрипку, чтобы она лучше подходила к маленькой рамке. Я могу сократить его до двух недель, если это окажется слишком большим. Спасибо за вашу помощь! - person Jorg; 23.04.2013