如何在c3js餅圖上繪制自定義JSON數據？

Question

我想基於以下JSON（從HQL-hibernate Java Play框架接收）繪制C3js餅圖... JSON看起來像這樣（這是動態數據）：

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

HTML：

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

JS（我實際嘗試過的）：

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

這是一個小提琴供參考。

在ug，ug1，ug2，ug3的地方，我需要K，M2，M3，M4（需要注意的是，這些是動態數據）有人可以幫助我根據需要操縱數據以繪制餅圖嗎？ 我希望在后端更改JSON的結構不是唯一的解決方案（盡管對我而言這很困難）。 任何其他解決方案都值得贊賞。

Answer 1

只要"ug"和"wtv"具有相同數量的元素...

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/