5

JQuery Mobile と Flot を使用するサイトのセットアップに取り組んでいます。アイデアは、スワイプできるグラフを表示できるということです。

これまでのところ、私はこれを持っています: http://lasmit.co.uk/tmm-graphs/graph2.php

最初のグラフは問題なく動作しますが、横にスワイプすると、ラベルが軸線の上に表示されて見えなくなります。

ここで明らかな何かが欠けていると確信しているので、どんな助けでも大歓迎です。

4

2 に答える 2

15

現在表示されていないものを呼び出すと、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/

于 2012-09-20T15:19:04.457 に答える
0

ページに直接アクセスするとプロットが正しくレンダリングされるため、スライドに問題があるようです。たとえば、次のURLを開きます：http： //lasmit.co.uk/tmm-graphs/graph2.php#device2、しかしその後、他のページが正しくレンダリングされません。

DIV要素のサイズを設定しますが、プロットの正確なサイズも設定してみてください。

于 2012-09-20T07:36:24.137 に答える