我在一个简单的 html 页面中使用 C3 圆环图。当我使用以下代码时,图表加载没有错误:
json : [{"Total Participants":4825},{"Male":3019},{"Female":1806},],
keys : {
value : ['Total Participants', 'Male', 'Female' ],
}
但是我必须使用 JavaScript 为“json”和“keys”构建输入,这样它就不是静态的。请注意,我不想在这里使用ajax。我只想构建输入
[{"Total Participants":4825},{"Male":3019},{"Female":1806},]
和
['Total Participants', 'Male', 'Female' ]
使用 JavaScript。这是我尝试过的代码,但不起作用。
var keysChart = '[';
var chartJsonData = '[';
for (var i = 0; i < data.length; i++) {
keysChart += data[i].title;
if(i < data.length - 1) keysChart += ',';
chartJsonData += '{';
chartJsonData += data[i].title;
chartJsonData += ':';
chartJsonData += data[i].value;
chartJsonData += '}';
chartJsonData += ','
}
chartJsonData += ']';
keysChart += ']';
上面代码的输出看起来与我想要的类似,但它不起作用。我相信可能存在一些格式问题。
我按以下方式使用生成的数据:
json : chartJsonData,
keys : {
value : keysChart,
}
控制台出现以下错误:
Uncaught TypeError: a.forEach is not a function
最佳答案
var arrData = [];
var keysForChart = [];
var jsJsonObj = new Object();
for (var it = 0; it < data.length; it++) { // data from an external json file.
keysForChart.push(data[it].title);
jsJsonObj[data[it].title] = data[it].value;
}
arrData.push(jsJsonObj);
然后使用以下代码生成图表
c3.generate({
bindto : '#chart',
data : {
json : arrData,
keys : {
value : keysForChart
},
type : 'bar'
},
.....
});
关于javascript - Javascript 中的 C3 图表 json 数据格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38520656/