1

jQuery モバイル Web アプリでグラフを作成したいと考えています。チャートを使用しjqPlotていますが、チャートを作成できません。次のコードを使用しています。

    <html>
    <head>
        <script type="text/javascript" src="@Url.Content("~/Scripts/app/jquery.mobile-1.0b2.min.js")"></script>
        <script type="text/javascript"src="@Url.Content("~/Scripts/jquery.jqplot.min.js")"></script>
        <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/jquery.jqplot.min.css" )"/>
        <link rel="stylesheet" href="@Url.Content("~/Content/jquery.mobile-1.0b2.css")" />
        <link rel="stylesheet" href="@Url.Content("~/Content/jquery.mobile-1.0b2.min.css")" />

        <script type="text/javascript">
            $('#index').live('pageinit', function (event) {
                alert("jqplotchart");
                $.jqplot('container', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]);
            });
        </script>
    </head>
    <body>
        <div id="index" data-role="page">
            <div id="container" style="height: 400px; min-width: 600px">
            </div>
        </div>
    </body>
    </html>

jQueryを確認するために、関数にアラートも追加しましたが、アラートも表示されません。pageinit()イベントを間違った方法で使用している可能性がありますか？イベントの使用方法を教えてください。pageinit()または、グラフを作成するために他のイベントを使用する必要がありますか?

4

2 に答える 2

0

これはおそらくもう答えを必要としないでしょう、しかし私が数日前に質問を見たならば、私は答えが役に立つと思ったでしょう。

2つの問題があります：

  1. jquery mobile javascriptを含める前に、「jquery.mobile-xxxmin.js」を含める必要があります。
  2. jqPlotは「pageinit」が好きではありません。代わりに「pageshow」を使用する必要があります。
于 2012-10-17T10:10:01.033 に答える
0

もっと簡単な方法があります（私の場合はうまくいきました）：

-最初に:プロット コンテナー divをページの外側に配置します (たとえば、bodyタグのすぐ下):

<body>
<div id="plotContainer"></div>
...

-次に: $(document).ready(function(){ ... here ... });にプロット (グラフ) を設定します。ページ間で表示されないように非表示にします。

$("#jqxChart").jqxChart(settings);
$("#jqxChart").hide();

-最後に：ページ内のプロットでdivをコピーするだけです：

<script>
$('#page_ID').bind('pageshow', function(data) { 
$("#jqxChart").appendTo("#ID_of_DIV_you_want");
$("#jqxChart").show();  
$('#jqxChart').jqxChart('refresh');
});
</script>

お役に立てれば！！！

于 2014-09-10T08:10:26.787 に答える