当前位置：文江博客话题详情

jqPlot 页面加载图表

发布于 2024-10-30 07:22:30 字数 134 浏览 4 评论 0原文

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

关于我如何去做这件事有什么建议吗？

谢谢， S。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不奢求什么 2024-11-06 07:22:30

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

Javascript 部分看起来像这样：

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

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

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

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

});

It's hard to give any specifics without more detail about the items, but basically you would pass a JSON structure to your view with the items to be plotted. Then you would loop through the JSON structure, creating DIV tag for each item to be plotted and appending the DIV tags to the body.

The Javascript part would look something like this:

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

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

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

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

});

回复收藏 0 原文

北方的巷 2024-11-06 07:22:30

这个问题非常笼统，但回答（具体且仅）加载多个图表的问题：

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

});

This question is very general, but answering (specifically and only) the question of loading multiple charts:

You need a unique HTML div id for each chart; consider using an RFC 4122 UUID (generate as needed) for each chart/div rather than a sequential index for each. Use something that looks like this as a placeholder div for each:

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

This embeds the JSON URL for each div inside it, in a hidden hyperlink that can be discovered by JavaScript iterating over your multi-chart HTML page.

The matter of the UUID is inconsequential -- it just seems the most robust way to guarantee a unique HTML id addressable by JavaScript for each chart.

Subsequently, you should have JavaScript that looks something like:

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);
            }   
        }); 
    }); 

});

回复收藏 0 原文

~没有更多了~