jQuery Mobile с флотом и навигацией AJAX - PullRequest
Новая
       18

jQuery Mobile с флотом и навигацией AJAX

7 голосов
/ 16 июня 2011

Я пытаюсь отобразить сгенерированный флотом график в проекте jQuery Mobile. Если я вызываю страницу jQuery Mobile по ее абсолютному пути (например, http://server.com/graph/fancy.php), все работает нормально, но как только я начинаю использовать встроенную в JQM навигацию AJAx, диаграмма выглядит зашифрованной.

Я также нашел эту другую тему jquery mobile и библиотека flot , но ни одно из описанных решений не работает для меня.

Есть ли способ заставить jQM и flot работать вместе? К сожалению, отключение AJAX также не вариант.

Генерация диаграммы: 

<script type="text/javascript">
var data = [[0, 3], [4, 8], [8, 5], [9, 13]];
$(function () {
    var plot = $.plot($("#chart"), [
        {
            label: "Oh hai",
            data: data,
            bars: { show: true }
        }
    ]);
});
</script>
<div id="chart" style="width: 600px; height: 350px;"></div>

Ответы [ 2 ]

12 голосов
/ 16 июня 2011

Что вам нужно сделать, это переместить вашу функцию графика в событие pageshow.Это потому, что flot плохо работает с заполнителями, которые не видны.Попробуйте это так: 

$('#graph').bind('pageshow', function() {
    var plot = $.plot($("#chart"), [
        {
        label: "Oh hai",
        data: data,
        bars: {
            show: true
        }}
    ]);
});

В действии здесь: http://jsfiddle.net/MT22y/8/

0 голосов
/ 16 июня 2011

Я думаю, вам лучше переопределить стили элементов графика.Например, я переместил график в сторону, добавив отступ: http://jsfiddle.net/MT22y/7/, чтобы он больше не покрывал ось.

Возможно, вам придется немного поиграть со стилями и шириной,но это, наверное, самый простой способ.

...