0

アイテムの数を選択するフォームがあります。[送信] をクリックすると、選択したアイテムが表示される新しいページが表示され、選択したアイテムの数に応じて、アイテムごとに 1 つずつ、多数の jqPlots が作成されます。

これを行うにはどうすればよいですか？

ありがとう、S.

4

2 に答える 2

0

この質問は非常に一般的ですが、複数のチャートをロードするという質問に (具体的にのみ) 答えます。

グラフごとに一意の HTML div ID が必要です。各チャート/div のシーケンシャル インデックスではなく、RFC 4122 UUID (必要に応じて生成) の使用を検討してください。それぞれのプレースホルダー div として次のようなものを使用します。

<div class="chartdiv" id="chartdiv-${UID}">
  <a rel="api" type="application/json" href="${JSON_URL}" style="display:none">Data</a>
</div>

これにより、内部の各 div の JSON URL が非表示のハイパーリンクに埋め込まれます。このハイパーリンクは、マルチチャート HTML ページを反復処理する JavaScript によって検出できます。

UUID の問題は重要ではありません。これは、JavaScript で各グラフにアドレス指定できる一意の HTML ID を保証する最も堅牢な方法のように思えます。

その後、次のような JavaScript が必要です。

jq('document').ready(function(){
    jq('.chartdiv').each(function(index) {
        var div = jq(this);
        var json_url = jq('a[type="application/json"]', div).attr('href');
        var divid = div.attr('id'); 
        jq.ajax({
            url: json_url,
            success: function(responseText) { /*callback*/
                // TODO: responseText is JSON, use it, normalize it, whatever!
                var chartdata = responseText;
                jq.jqplot(divid, chartdata.seriesdata, chartdata.options);
            }   
        }); 
    }); 

});
于 2011-09-23T22:10:45.713 に答える
0

アイテムの詳細がなければ、詳細を示すことは困難ですが、基本的には、プロットするアイテムを含む JSON 構造をビューに渡します。次に、JSON 構造をループして、プロットする各項目の DIV タグを作成し、DIV タグを本文に追加します。

Javascript 部分は次のようになります。

$.each(items, function(index, value) {
  $myPlot = $("<div>");

  $myPlot.attr("id", "item"+index);

  $.jqplot($myPlot.attr("id"), ...);

  $("body").append($myPlot);

});
于 2011-04-04T21:25:57.770 に答える