使用 CanvasJS 动态确定要显示的饼图数量并在单个页面上显示每个饼图

Question

我希望构建不确定数量的饼图并能够在页面上将它们并排显示。生成的饼图数量将取决于 JSON 对象中的元素数量。我在下面提供了一个示例，说明我的数据将如何显示：

[
  {
    "id" : "123",
    "data" : [20, 40, 10, 20, 10]
  },
  {
    "id" : "456",
    "data" : [10, 20, 20, 30, 20]    
  },
  {
    "id" : "789",
    "data" : [25, 35, 5, 10, 25]
  }
]

我想为每个具有“id”和“data”属性的元素制作一个饼图。 “数据”将用作饼图中包含在元素中的“id”的数据点。我怎样才能做到这一点？

Answer 1

解析来自 JSON 的数据并将其传递给图表选项。找到下面的代码：

var dps = [];
var dataSeries = [];
var charts = [];

$.when( $.getJSON("https://api.myjson.com/bins/us9mk", function(result) {  
  for(var i = 0; i < result.length; i++) {
    dps = [];
    for(var j = 0; j < result[i].data.length; j++) {
      dps.push({y: result[i].data[j]});
    }
    dataSeries.push({id: result[i].id, type: "pie", dataPoints: dps})
  }
})).then(function( data, textStatus, jqXHR ) {
  for(var i = 0; i < dataSeries.length; i++) {
    $("#chartsContainer").append("<div id='" + dataSeries[i].id + "' style='width: 100%; height: 200px;'></div>");
    charts[i] = new CanvasJS.Chart(dataSeries[i].id, {
      title: {
        text: dataSeries[i].id
      },
      data: [dataSeries[i]]
    });    
    charts[i].render();
  }
});

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="chartsContainer"></div>

使用 CanvasJS 动态确定要显示的饼图数量并在单个页面上显示每个饼图

Dynamically determine number of pie charts to be displayed and display each one on a single page using CanvasJS

javascript

json

pie-chart

canvasjs