Javascript C3图表不从jQuery数据呈现

因此，我只是开始接触一些简单的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'] }
            }
        });
    });
});

$.getJSON（'api/randomData？chartCount='+ChartToMake）.done（函数（数据）{
//从数据中提取服务器列表。。。
var hostList=[]
$.map（数据，函数（行）{hostList.push（row.host）；}）；
//让它成为一个独特的列表
var uniqueHostList=hostList.unique（）；
//迭代唯一的服务器列表
uniqueHostList.forEach（函数（主机）{
var tag=“chart”+host.replace（/\./g，”）；
var hostdata=data.filter（（v，i，a）=>v.host==host）
log（“处理服务器：“+host+”和“+hostdata.length+”行”）；
//创建要将图表绑定到的DOM元素
document.getElementById（“chartBlocks”）.innerHTML+=“”；
//在这里创建图表
var图表=c3.0({
bindto:“#”+标记，
数据：{
json:hostdata，
键：{value:['lowerband']}
}
});
});
});

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

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

我添加了很多console.out（）的东西来尝试和调试这个，它有数据，一切似乎都正常，最后一个图表看起来不错，但上面的其他3个图表没有填充

我一直在绞尽脑汁想弄清楚原因，请帮帮我！ 另外，我在这里创建了一个github项目，它是一个简单的maven/spring启动应用程序。

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

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

“只有最后一张图表绘制出来。”

---

这似乎解决了问题。我原以为+=会附加内容，事实上它似乎确实这样做了，但我没有意识到副作用。我将进一步研究这一点，我想了解如何跟踪/调试这类事情，以防它再次出现。并不是说我会很快成为一个用户界面的人。再次感谢您的解释和解决方案。我还应该说，除了事件功能外，它还删除了c3（通过d3）添加到dom元素的数据属性，这就是为什么以前添加的图表（如果确实出现）是空的。这可能是两者中最重要的一个，但任何一个都会破坏你的图表（设法保存数据，但丢失事件意味着一个可见但没有吸引力的图表）

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