时间戳

首页 > 解决方案 > 从 JSON 创建具有多列的饼图

javascript - 从 JSON 创建具有多列的饼图

问题描述

我想从我的 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"}]

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

标签： javascripthtmld3.js

解决方案

您可以通过遍历对象从您共享的 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>

推荐阅读