Ярлыки не помещаются должным образом над гистограммой

Question

Я занимаюсь разработкой приложения, используя jquery mobile и flot.

В этом у меня есть 3 вкладки. Я отображаю свой график на первой вкладке. Но происходит странная вещь: если я строю график на первой вкладке, мои метки теряются. Вот код скрипки jsFiddle code

Но если предположить, что я строю график на второй или третьей вкладке, то мои графики верны. Мой код здесь jsfiddle code

почему это происходит?

Answer 1

Похоже, plotOffset расчет для ваших вкладок отличается и зависит от того, виден контейнер или нет.Я думаю, это потому, что jQuery не может рассчитать высоту элемента, который скрыт с помощью display: none.В первом примере plotOffset даст вам эти цифры:

{left: 22, top: 41}

, а для второго

{left: 7, top: 4}

Когда вы затем позвоните ctx.translate(plotOffset.left, plotOffset.top);, вы, очевидно, будете иметь различную позицию метки наcanvas.

Самый простой обходной путь - это нормализовать перевод следующим образом:

ctx.translate(7, 3); // No need to care of plotOffset left and top

Использовать статически определенные поля меток вместо значений plotOffset.

Обновленные демонстрации:
http://jsfiddle.net/Sp8MP/5/
http://jsfiddle.net/Sp8MP/6/

Answer 2

Я понял.Мне просто нужно изменить plot.Offset() на plot.getPlotOffset() Тогда он работает правильно.

offset () - Возвращает смещение области черчения внутри сетки относительно документа, полезнонапример, для вычисления позиций мыши (event.pageX / Y минус это смещение - позиция пикселя внутри графика).

getPlotOffset () - Получает смещение, которое сетка имеет в пределаххолст как объект с расстояниями от краев холста как «левый», «правый», «верхний», «нижний».Т.е., если вы нарисуете круг на холсте с центром, расположенным в (слева, сверху), его центр будет находиться в самом верхнем левом углу сетки.