我有一个表格,我可以在其中选择项目数。单击提交后,它应该将我带到一个新页面,该页面将显示所选项目,并且根据所选项目的数量,它将创建许多 jqPlot,每个项目一个。
关于如何执行此操作的任何建议?
谢谢,S。
这个问题非常笼统,但是(特别且仅)回答了加载多个图表的问题:
每个图表都需要一个唯一的 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);
}
});
});
});
如果没有关于项目的更多详细信息,很难给出任何细节,但基本上你会将一个 JSON 结构传递给你的视图,其中包含要绘制的项目。然后,您将遍历 JSON 结构,为要绘制的每个项目创建 DIV 标记并将 DIV 标记附加到正文。
Javascript 部分看起来像这样:
$.each(items, function(index, value) {
$myPlot = $("<div>");
$myPlot.attr("id", "item"+index);
$.jqplot($myPlot.attr("id"), ...);
$("body").append($myPlot);
});