jqPlotをjQueryMobileで使うときのポイント

jqPlotをjQueryMobileで使うときのポイント

jqPlotをjQueryMobileで使うときには
グラフ作成のタイミングが重要になる

グラフを表示したいページに
pageshowイベントで
$.jqplotを呼び出すことでグラフを描画する
グラフが表示されないときには、呼び出すイベントに注目

$(document).on("pageshow","#chartbasic",function(e){
  plot = $.jqplot("chart",data,opts);
});

#chartbasicは
data-role=”page” id=”chartbasic”
で、表示するページのid

次の注意点として、パソコンと違いスマートフォンでは、画面が横向になる
デフォルトだと
横向になるとグラフが画面からはみ出たり
横が余る
これを防止するには
端末の向きが横向になると発生するイベント
orientationchangeイベントを検出したら
グラフを再描画するようにする

$(window).on(""orientationchange",function(e){
plot.replot();
});

また、端末の向きの変更でグラフの再描画をしたときに
ブラウザーのウインドウの幅と高さが
画面の幅と高さと
あっていないと
これも、グラフがはみ出たり、横が余る

この対処としては
viewportの設定をすることで解決する
ほとんどのスマートフォン向けWebアプリではこれを付けることも多い

<meta name="viewport"  content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

あと、重要なのが
別のページに行ったときに、jQueryMobileは現在のページのDOM情報を保持したまま
別ページ遷移する

このため、もう一度同じページに戻ると
再びグラフ描画が実行され
2つのグラフが描画されてしまい
レイアウトが崩れる

この対策としては、
別のページに遷移した後にグラフを削除しておく

$(document).on("pagehide","#chartbasic",function(e){
  plot.destroy();
});