从 JSON 创建具有多列的饼图答案

【问题标题】：Create Pie Charts from JSON with multiple column从 JSON 创建具有多列的饼图
【发布时间】：2019-04-04 05:28:25
【问题描述】：

我想从我的 JSON 数据创建一个饼图（使用 D3.js）。我知道可以从多行创建它，并且只有两列。例如，如果 JSON 数据是这样的

    [{"name":"Kamran","count":"4"},{"name":"Krishana","count":"6"}]

我找到了https://jsfiddle.net/canvasjs/sv6j8nh4/以上数据的这个例子

但我的数据例如包含单行多列

    [{"name":"Task1","Agree":"4","Disagree":"22","Inbetween":"4"}]

如何使用此类数据创建饼图？

【问题讨论】：

您需要重新格式化该 json 以使每个响应都在一个组中。
那不是D3，那是Canvas.js。如果您需要有关 D3 的帮助，请分享使用 D3 使用原始数据创建饼图的代码，然后我们可以帮助您将当前数据结构转换为有效的数据结构......否则，您要求我们 编写整个datavoz代码，这当然是题外话了。
你能在这里检查一下吗？我希望你能得到你想做的事。 nvd3.org/examples/pie.html

标签： javascript html d3.js

【解决方案1】：

您可以从iterating through the object 共享的 JSON 中呈现饼图。找到下面的工作代码。

var dataPoints = [];

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Pie chart from JSON data"
  },
  data: [{
    type: "pie",
    toolTipContent: "{indexLabel}: {y}",
    dataPoints: dataPoints
  }]
});

function addData(data) {
  for(var i = 0; i < data.length; i++){
    for(var key in data[i]){
      if(!isNaN(data[i][key])){
        dataPoints.push({indexLabel: key, y: Number(data[i][key])});
      }
    }
  }
  chart.render();
}

$.getJSON("https://api.myjson.com/bins/1dxzog", addData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

【讨论】：

【解决方案2】：

饼图可以有一个维度列和一个度量列。您可能正在尝试从两个维度列（名称和协议）创建饼图。你不能在一张饼图中做到这一点。您需要预处理 JSON 并创建如下内容：

[
  {
    "name": "Task1",
    "agreements": [
      {
        "name": "Agree",
        "count": 4
      },
      {
        "name": "Disagree",
        "count": 22
      },
      {
        "name": "InBetween",
        "count": 4
      }
    ]
  },
  {
    "name": "Task2",
    "agreements": [
      {
        "name": "Agree",
        "count": 4
      },
      {
        "name": "Disagree",
        "count": 22
      },
      {
        "name": "InBetween",
        "count": 4
      }
    ]
  }
]

然后为每个任务创建一个饼图或一次显示一个任务的图表。

【讨论】：