jq頁面加載圖表

我有一個表格，我選擇的項目數量。點擊提交後，它應該帶我到一個新的頁面，它將顯示所選項目，並根據所選項目的數量，它會創建許多jqPlot，每個項目一個。jq頁面加載圖表

關於如何去做這件事的任何建議？

感謝， S.

來源

2011-04-04 reg_frenzy

你提交與POST形式？ – 2011-04-04 19:10:29

他們基本上是JSF頁面。所以，點擊提交按鈕後，我有一個動作可以將我重定向到所需的頁面。 – 2011-04-04 19:54:12

很難給出任何細節沒有關於項目更詳細，但基本上你會傳遞一個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-04 21:25:57

謝謝，這給了我一個主意。我正在嘗試類似的東西。我有JSF的前端和Groovy類作爲後臺bean。我會試着看看這些功能。我是所有這些技術的新手。你有沒有我可以閱讀的樣本/參考資料，以獲得更多相同的見解？就像如何將數據轉換爲JSON一樣，我如何從JSF頁面調用這個javascript函數（假設我有一個單獨的JS文件）。 – 2011-04-04 21:59:29

@reg_frenzy不幸的是，我也不熟悉。我會建議爲這些框架的具體實施問題提出一個新問題。 – 2011-04-04 23:08:48

這個問題很普遍，但在回答（特別是只）加載多個圖表的問題：

你需要一個獨特的HTML DIV每個圖表的ID;考慮對每個圖表/ div使用RFC 4122 UUID（根據需要生成），而不是每個圖表/ div的順序索引。使用的東西，看起來像這樣的佔位符DIV每個：

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

這將嵌入的JSON網址裏面的每個格，在一個隱藏的超鏈接，可以通過JavaScript的發現遍歷您的多表HTML頁面。

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-23 22:10:45 sdupton

jq頁面加載圖表

回答

相關問題