Question

我有一个这样的api返回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秒更新一次的答案。

const nameToFindBy = '...';
const matchId = this.matches.find(m => m.name === nameToFindBy).MatchId;

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);

如何从Json格式生成图表

1 个答案: