Динамически определять количество круговых диаграмм, которые будут отображаться, и отображать каждую на одной странице, используя 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». 'data' будет использоваться как dataPoints в круговых диаграммах для '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>