2

私はjqplotchartを挿入したいjquerymobileアプリを準備しているので、そのためのコードを書きました。しかし、今の問題はチャートが私のページに表示されていないことです。

ライブラリ i

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="stylesheet" href="stylesheets/jquery.mobile-1.1.1.min.css" type="text/css"/>
<link rel="stylesheet" href="stylesheets/jquery.jqplot.css" type="text/css"/>
<link rel="stylesheet" href="stylesheets/jqm-docs.css" type="text/css"/>
<script src="jquery.jqplot.min.js" type="text/javascript"></script>
<script src="jqplot.pieRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.barRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>
<script src="underscore-min.js" type="text/javascript"></script>
<script src="hideAddressBar.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.dataTables.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="jqm-docs.js"></script>
<script type="text/javascript" src="jquery.flot.min.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasTextRenderer.min.js"></script>

私が書いたJavaScript：

$(document).bind("mobileinit",function() {
            // go to server for chart data

            $('#pagePlotChart').live('pageshow',function() {
            $.get("mygraphdata",  function(data){
            $.jqplot('plotChart', data,{ 
                title:'My Chart',
            axesDefaults: 
                { 
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                },
            axes: 
                { xaxis: { label:"Day", pad: 0 }, 
                yaxis: { label: "Measurement" } 
            } 
            });
            }); 
            return false;
            });
            });

html コード:

<div id="pagePlotChart" data-role="page" data-rockncoder-jspage="managePlotChart">
    <header data-role="header" data-position="fixed">
        <h1>Plot Chart</h1>
    </header>
    <section data-role="content">
        <div id="plotChart" class="myChart"></div>
        <button id="refreshPlotChart" value="Refresh Chart" data-mini="true"></button>
    </section>
</div>

実際には、いくつかのphpファイルからjsonデータを取得して、このチャートに渡す必要があります。chart は、いくつかのphpファイルからのjsonデータを使用してグラフを表示する必要があります。

私のjsonデータはこの形式になります ["v1:myName","g:233","h:322"]..etc.

php ファイルは json データを送信しています。フィドラーをチェックインしました。しかし、チャートが機能していません。これの解決策を教えてください。

4

3 に答える 3

1

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

-最初に:プロット コンテナー 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-10T07:56:10.310 に答える
1

まず最初に、ページ ヘッダーで jQuery モバイルを 2 回読み込んでいることに気付きました。古いバージョンを削除し、ほとんどまたはすべての JS インクルードをページ フッターに移動してみてください。そうすれば、JS ファイルがブラウザーによってダウンロードされる前にページを (部分的に) レンダリングできます。jqplot コンポーネントのベスト プラクティスは、インクルードをフッターに移動することです。

jqplot コンポーネントをロードする実際の順序はほぼ正しいです。ただし、メインのjQueryファイルはメインのjqplotファイルの前にロードする必要があるようですが、現在、jqplotの前にモバイルバージョンのjQueryのみがロードされています。詳細については、この回答を参照してください。

jqplot がロードされているがデータが存在しない場合、またはデータまたはチャート コードにバグがある可能性がある場合、チャートがあるはずのページに空白のスペースが表示されます。PHP ページから取得するデータを手動で組み立てた静的チャート ページをロードできることを確認してください。これにより、データとインクルードがテストされます。

jqplot がまったくロードされていない場合 (たとえば、依存関係が正しい順序でロードされていない場合)、ページにグラフ用の空白がまったく表示されず、グラフがあるべき場所にゼロ スペースでレンダリングされます。

チャート div を正しく呼び出しているようです。ただし、機能しているかどうか$(document).bind("mobileinit",function()はわかりません。jqplot のベース コールは通常 $(document).ready(function(). ページがレンダリングされたときに最初に表示されない div にグラフを設定するのは難しい場合があります。それが問題である場合、この質問は役立つかもしれません。

于 2013-01-11T13:38:57.217 に答える
1

ページが初期化された後の jQuery Mobile レンダリング コンテンツに関するこの関連する質問を参照してください。基本的に、naugtur のコメントごとに .trigger('create') を使用できます。

于 2013-01-23T00:41:02.083 に答える