C3 图表未根据 jQuery 数据呈现

Question

所以我只是开始研究一些简单的 UI 东西，我正在努力 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 启动应用程序。 https://github.com/tfindlay-au/c3demo

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

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

Answer 1

"only the last chart draws up."

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

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

您需要向图表块附加一个额外的 div，这样现有的同级图表就不会受到影响，并且由于 c3 使用 d3 库，您可以这样做：

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

C3 图表未根据 jQuery 数据呈现

C3 charts not rendering from jQuery data

javascript

jquery

spring-boot

c3.js