Perché le mie etichette dell'asse di flottaggio appaiono sopra l'asse? JQM

Question

Ho lavorato alla creazione di un sito che utilizza JQuery Mobile e Flot. L'idea è che possa mostrare grafici tra cui puoi scorrere.

Finora ho questo: http://lasmit.co.uk/tmm-graphs/graph2.php

Il primo grafico funziona bene, ma se si scorrere verso il lato delle etichette appaiono sopra la linea dell'asse e guardare fuori.

Sono sicuro che mi manca qualcosa di ovvio, quindi qualsiasi aiuto sarebbe molto apprezzato.

Answer 1

Flot non funziona troppo bene quando si chiama $.plot su qualcosa che al momento non è visibile. La cosa migliore è andare a essere quello di spostare la pagina 2 e 3 grafici in pageshow eventi:

$('#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"] } }); 
}); 

Ho fatto un esempio di lavoro qui: http://jsfiddle.net/ryleyb/yZuZb/

Answer 2

Sembra che ci sia qualcosa di sbagliato nello scorrimento, poiché la trama viene visualizzata correttamente quando si accede direttamente a una pagina, ad esempio apre il seguente URL: http://lasmit.co.uk/tmm-graphs/graph2.php#device2, ma le altre pagine vengono visualizzate in modo errato.

Si imposta la dimensione degli elementi DIV, si può provare anche a impostare la dimensione esatta per i grafici?