ハイチャートをjquerymobileと適切に統合できた人は誰ですか？JQueryモバイルとハイチャートの統合
グラフを含むページを直接リクエストすると（つまり、http://mysite.com/mobile/page.html）、チャートは初期化され、期待通りにレンダリングされます。代わりに、アンカーリンクを使用して同じページに移動しようとすると、ページはレンダリングされますが、グラフはレンダリングされません。私はグラフを初期化するために "pageshow"イベントを使用しています。
ご意見は大歓迎です！
jQueryモバイルでは、ページ固有のスクリプトとスタイルをpage-content div内に配置する必要があります。つまり、あなたがpagecreate上でスクリプトをバインドする必要が...私は最初のjQuery Mobileとコーディング始めたとき、私はこの同じ問題を抱えていた"Known Limitations" in documentation.
申し訳ありませんが仲間は、それを行ったが、まだ動作しません。 –
OK、いくつかのコードを投稿する必要があります。マークアップ＆スクリプト。 – Tsar
を参照してください：
$(document).delegate("#page-id", "pagecreate", function() {
// highcharts, etc.
}
私は皇帝に言及したものをしようとした私のためにしていることを働いた。私がしたことは
の中にスクリプトを追加し、 "page-content"内のスクリプトで使用されているID（rederTo）でdivを追加しました。
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Acura</title>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script src="libs/hightcharts/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
var chart1; // globally available
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</head>
<body>
<div id="ge" data-role="page">
<div data-role="header">
//header
</div>
<div data-role="content">
<div id="container"></div>
</div>
</div>
</body>
</html>
上記のコードをコピー＆ペーストしましたが動作しませんでした。 黒い枠内に「acura」と2つのスラッシュを含むヘッダーのみが表示されます 「// acura」 – royjavelosa
質問を編集してコードを追加できますか？ jQMバージョン？エラー？あなたは何を試しましたか？ –