Почему метки моей оси Flot y отображаются над осью? JQM

Я работаю над созданием сайта, использующего JQuery Mobile и Flot. Идея состоит в том, что он может отображать графики, между которыми вы можете перемещаться.

Пока у меня есть это: http://lasmit.co.uk/tmm-graphs/graph2.php

Первый график работает нормально, но если вы проведете пальцем в сторону, метки появятся над линией оси и исчезнут.

Я уверен, что мне не хватает чего-то очевидного здесь, поэтому любая помощь будет принята с благодарностью.


javascript flot jquery-mobile
person lewis    schedule 20.09.2012    source источник

Ответы (2)


arrow_upward
15
arrow_downward

Flot не работает слишком хорошо, когда вы вызываете $.plot для чего-то, что в данный момент не видно. Лучше всего переместить графики страниц 2 и 3 в события pageshow:

$('#device2').bind('pageshow',function(){    
  $.plot($("#total-inches-graph"), 
    [{  color: "rgb(14, 91, 173)", label: 'Total Measurements', data: totalInchesArray }] , 
    { xaxis: { mode: "time", timeformat: "%a" ,minTickSize: [1, "day"] } });
});

$('#device3').bind('pageshow',function(){    
  $.plot($("#weight-graph"), 
    [{  color: "rgb(32, 140, 47)", label: 'Weight', data: weightArray }] , 
    { xaxis: { mode: "time", timeformat: "%a" ,minTickSize: [1, "day"] } });
});

Я сделал рабочий пример здесь: http://jsfiddle.net/ryleyb/yZuZb/

person Ryley    schedule 20.09.2012
comment
это дало мне ключ к решению моей проблемы. Я применил ng-show к моей директиве флот-чарта в angular. изменение его на ng-if устранило проблему - person nuander; 25.05.2018

arrow_upward
0
arrow_downward

Кажется, что-то не так со скольжением, так как график отображается правильно при прямом доступе к странице, например, при открытии следующего URL-адреса: http://lasmit.co.uk/tmm-graphs/graph2.php#device2, но тогда другие страницы отображаются неправильно.

Вы устанавливаете размер элементов DIV, можете ли вы также попытаться установить точный размер для графиков?

person devrys    schedule 20.09.2012