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

【问题标题】：how to plot customized JSON data on c3js pie chart?如何在 c3js 饼图上绘制自定义 JSON 数据？
【发布时间】：2017-07-13 13:10:11
【问题描述】：

我想根据以下 JSON 绘制 C3js 饼图（从 HQL-hibernate Java Play 框架接收）... 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',
    }
});

Here is a fiddle for reference.

在 ug,ug1,ug2,ug3 的地方我需要 K,M2,M3,M4（请注意，这些是动态数据）任何人都可以帮我操作数据以根据需要绘制饼图吗？我希望在后端更改 JSON 的结构不是唯一的解决方案（尽管在我的情况下这非常困难）。任何其他解决方案表示赞赏。

【问题讨论】：

标签： javascript jquery json d3.js c3.js

【解决方案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/

【讨论】：

确实如此。感谢您的时间和帮助:)