时间戳

首页 > 解决方案 > C3 图表不从 jQuery 数据呈现

javascript - C3 图表不从 jQuery 数据呈现

问题描述

所以我只是进入了一些简单的用户界面的东西，我正在纠结于 Javascript。我设法获得了几个 for 循环来创建标签并渲染一些图表，效果很好。

但我随后使用 jquery 从 Spring Boot REST 服务中获取 JSON 数据块。

    $.getJSON('api/randomData?chartCount=' + chartsToMake).done( function(data) {

    // Extract list of servers from the data...
    var hostList = []
    $.map(data, function(row) { hostList.push(row.host); });

    // Make it a unique list
    var uniqueHostList = hostList.unique();

    // Iterate over the unique list of servers
    uniqueHostList.forEach( function(host) {
        var tag = "chart" + host.replace(/\./g, "");
        var hostdata = data.filter( (v,i,a) => v.host === host)

        console.log("Processing Server:" + host + " with " + hostdata.length + " rows");

        // Create DOM element to bind the chart to
        document.getElementById("chartBlocks").innerHTML += "<div id=\"" + tag.replaceAll('#','') + "\"></div>";

        // Create the Chart here
        var chart = c3.generate({
            bindto: "#" + tag,
            data: {
                json: hostdata,
                keys: { value: ['lowerband'] }
            }
        });
    });
});

这将返回一组 JSON 字符串，每个对象包含一个服务器指标，插入所有 HTML 标记，但只绘制最后一个图表。

我添加了很多 console.out() 东西来尝试调试它，它有数据，一切似乎都在工作，最后一个图表看起来很好，但上面的其他 3 个没有填充。

我一直在拔头发试图找出原因，请帮忙！PS。我在这里创建了一个 github 项目，它是一个简单的 maven/spring boot 应用程序。 https://github.com/tfindlay-au/c3demo

有一个名为“ working.html ”和“ index.html ”的工作页面不起作用。

FWIW - 如果我试图在数据可用之前生成图表，它感觉就像一个变量范围的事情或者可能是一个时间的事情。不确定这是否有帮助。

标签： javascriptjqueryspring-bootc3.js

解决方案

“只画最后一张图表。”

document.getElementById("chartBlocks").innerHTML += "<div id=\"" + tag.replaceAll('#','') + "\"></div>";

因为那条线（起初我认为它完全取代了内容，但后来我看到了 += ）对图表块的现有内容有不好的副作用。具体来说，它消除了设置 c3.chart 附加到该图表中元素的事件功能（编辑：和数据）。然后，当您再次在图表块中设置 innerHTML 时，所有这些内容都将替换为 innerHTML 字符串，它只是 dom 元素结构的文字副本 - 消除了任何先前附加的事件处理程序或数据属性。

相反，您需要向图表块附加一个额外的 div，这样可以使现有的同级图表保持平静，并且由于 c3 使用 d3 库，您可以这样做：

d3.select("#chartBlocks").append("div").attr("id", tag.replace('#',''));

推荐阅读