Javascript 如何格式化饼图 DataTable 的 json 值

Question

我有一个 API returns 100 行很多不同的 json 数据 包括 HTTP 状态：

{"data": [{"status": 409},{"status": 200},{"status": 404},{"status": 200},{"status": 200},{"status": 200}]}

我想制作一个饼图，它需要这样的数据表：

['status', count],
['200', 4],
['404', 1],
['409', 1]

完成此任务最优雅的方法是什么？我对 vanilla Javascript 比较熟悉，但会接受 Jquery 或其他解决方案。

我原以为有一个简单的库 (?) 可以让我从我的 json 中选择“状态”，它会自动将其格式化为饼图（任何饼图 - 虽然我我正在尝试 Google 图表开始）——但我还没有找到这样的图书馆。

我试过的... 我列出了要学习如何完成的事情 ...假设没有“图书馆”或简单的方法select，计数（也可能从最低到最高）Google 或其他饼图的 json 数据，这看起来像一个不错的计划，还是有更好的方法？

创建一个新数组，每个“状态”作为一个元素
从新数组中，从 json 中确定每个唯一状态（我 Google 有几种方法可以在数组中找到唯一值，还没有想出哪一种适合我）作为另一个新数组
使用第一个和第二个新数组的组合，计算每个状态在 json 中出现的次数（我想我可以使用 each 或 foreach 并为每个状态的每次出现加 1唯一状态元素)
用计数格式化每个唯一状态，添加括号和逗号（我想我可以在名称值对之间使用连接，所以最后一个没有额外的逗号，并且 + 使用单引号连接逗号和括号, 也许)
将状态从低到高排序（这将用于从绿色到红色的颜色编码，其中 200 为绿色，500 为红色）
为每列添加标题

感谢您的任何建议。

Answer 1

我相信 array.reduce 循环可以解决问题。

let data = {
  "data": [{
    "status": 409
  }, {
    "status": 200
  }, {
    "status": 404
  }, {
    "status": 200
  }, {
    "status": 200
  }, {
    "status": 200
  }]
}

let newdata = data.data.reduce((accum, a) => {
 // console.log(accum, a);
  let found = 0;
  accum.forEach((el, index) => {
    if (el[0] == a.status) {
      accum[index][1]++;
      found = 1
    }
  })
  if (!found) accum.push([a.status.toString(), 1])
  return accum
}, [
  ['status', 'count']
]);

console.log(newdata)

Javascript 如何格式化饼图 DataTable 的 json 值

Javascript how to format json values for pie chart DataTable

javascript

json

pie-chart