0

我有一个表格,我可以在其中选择项目数。单击提交后,它应该将我带到一个新页面,该页面将显示所选项目,并且根据所选项目的数量,它将创建许多 jqPlot,每个项目一个。

关于如何执行此操作的任何建议?

谢谢,S。

4

2 回答 2

0

这个问题非常笼统,但是(特别且仅)回答了加载多个图表的问题:

每个图表都需要一个唯一的 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>

这会将每个 div 的 JSON URL 嵌入其中,隐藏在一个隐藏的超链接中,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-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 回答