所以我只是开始研究一些简单的 UI 内容,而且我正在努力使用 Javascript。我设法获得了几个 for 循环来创建标签并呈现一些图表,效果很好。
但我随后使用 jquery 从 Spring Boot REST 服务中获取了一个 JSON 数据 block 。
$.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 boot 应用程序。 https://github.com/tfindlay-au/c3demo
有一个名为“working.html”和“index.html”的工作页面不起作用。
FWIW - 如果我试图在数据可用之前生成图表,这感觉就像是一个可变范围的东西,或者可能是一个计时的东西。不确定这是否有帮助。
最佳答案
“只绘制最后一张图表。”
document.getElementById("chartBlocks").innerHTML += "<div id=\"" + tag.replaceAll('#','') + "\"></div>";
因为该行(起初我认为它完全取代了内容,但后来我看到了 += )对图表 block 的现有内容有不好的副作用。具体来说,它消除了设置 c3.chart 已附加到该图表中元素的事件功能(编辑:和数据)。当您再次在 chartblocks 中设置 innerHTML 时,所有这些内容都将替换为 innerHTML 字符串,它只是 dom 元素结构的文字副本 - 清除所有先前附加的事件处理程序或数据属性。
您需要将一个额外的 div 附加到图表 block ,这样现有的同级图表就会保持平静,并且由于 c3 使用 d3 库,您可以这样做:
d3.select("#chartBlocks").append("div").attr("id", tag.replace('#',''));
关于javascript - C3 图表不从 jQuery 数据呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50433738/