C3 图表 json 中的数据格式化 Javascript

Question

我在一个简单的 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

Answer 1

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'
  },
  .....
});

C3 图表 json 中的数据格式化 Javascript

C3 chart json data formatting in Javascript

html

javascript

jquery

c3.js