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页面加载图表

回答

相关问题