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 个图表没有填充。

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

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

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

Answer 1

">

只有最后一个图表绘制出来。

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('#',''));