如何在c3js饼图上绘制自定义JSON数据？

Question

I want to plot C3js pie chart based on the following JSON (received from HQL-hibernate Java Play framework)... JSON looks like this (This is dynamic data):

{"ug":["K","M2","M3","M4"],"wtv":[10,20,35,60]}

HTML:

<div id="chart"></div>

JS (what I actually tried):

var json ={"ug":["K","M2","M3","M4"],"wtv":[10,20,35,60]};
var ug =json.ug;
var wtv=json.wtv;     
var chart = c3.generate({
    data: {
       json: {
          ug:wtv[0],
          ug1:wtv[1],
          ug2:wtv[2],
          ug3:wtv[3],
        },
        type : 'pie',
    }
});

Here is a fiddle for reference.

In places of ug,ug1,ug2,ug3 I need K,M2,M3,M4(To be noted these are dynamic data) Can anyone help me to manipulate the data to draw the pie chart as required? I hope changing the structure of JSON at the back end is not the only solution (it is very difficult in my case though). Any other solutions are appreciated.

Answer 1

so long as "ug" and "wtv" have the same number of elements...

var json = {"ug":["K","M2","M3","M4"],"wtv":[10,20,35,60]};
var pieJson = {};
json.ug.forEach(function (ug, index) {
  pieJson[ug] = json.wtv[index];
});

var chart = c3.generate({
  data: {
    // iris data from R
    json: pieJson,
    type : 'pie',
  }
});

jsfiddle.net/4h4z00g7/