html - 页面加载时的 jqPlot 图表

Question

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

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

谢谢，S。

Answer 1

这个问题非常笼统，但是（特别且仅）回答了加载多个图表的问题：

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

});

Answer 2

如果没有关于项目的更多详细信息，很难给出任何细节，但基本上你会将一个 JSON 结构传递给你的视图，其中包含要绘制的项目。然后，您将遍历 JSON 结构，为要绘制的每个项目创建 DIV 标记并将 DIV 标记附加到正文。

Javascript 部分看起来像这样：

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

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

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

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

});