Как сгенерировать диаграмму из формата Json

Question

У меня есть api return Json, как это:

[{
    "userId":"fozzie",
    "numberOfusers":3
},{
    "userId":"gonzo",
    "numberOfusers":4
},{
    "userId":"kermit",
    "numberOfusers":6
},{
    "userId":"teddy",
    "numberOfusers":5
}]

Я хочу использовать инструмент с открытым исходным кодом для создания графика из моего API. Я попробовал Jasper Report, но я действительно не знаю, как его использовать. Я попробовал Google Chart, но он генерирует диаграмму из кода, я должен написать свой Json к нему. Если в моем API будут какие-то изменения в будущем, мне придется снова его перекодировать. Можете ли вы дать мне какое-то решение для этого. Какой инструмент я должен использовать? p / s: я не могу использовать онлайн-инструмент, потому что я не хочу, чтобы мои API стали публичными.

Answer 1

Highcharts - один из вариантов, составление графиков ваших данных с помощью этой библиотеки должно быть очень простым. Я изменил ответ, данные обновляются каждые 5 секунд.

let allUsers = ["fozzie", "gonzo", "kermit", "miss. piggy", "scooter", "animal", "beaker"];

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function createNewData() {
   return allUsers.reduce((res, user) => {
       if (Math.random() < 0.5) {
           res.push({ userId: user, numberOfUsers: getRandomInt(1,10)})
       }
       return res;
   }, []);
}

function chartNewData(data) {
    
  let seriesData = data.map(d => {
      return { name: d.userId, data: [d.numberOfUsers]}
  });
 
  Highcharts.chart('container', {
      chart: {
          type: 'column'
      },
      title: {
          text: 'User counts'
      },
      yAxis: {
          title: {
              text: 'Count'
          }
      },
      series: seriesData
  });
}

function updateChartData() {
    let seriesData = createNewData();
    chartNewData(seriesData);
}

updateChartData();
setInterval(updateChartData, 5000);

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 200px; margin: 0 auto"></div>