如何将JSON解析为Highcharts.js packedbubble类型的series数据

核心处理逻辑 #

• 先预置全量HTTP方法的默认统计值，所有方法初始计数为0，避免原始数据里缺失某类方法时图表项不全
• 遍历原始统计条目，按API名称做分组聚合，匹配到对应请求方法时，把统计值覆盖默认的0
• 把聚合完成的分组结果转换成图表要求的数组结构，直接传入series配置项即可

具体实现代码（JavaScript） #

// 原始输入数据
const rawData = [
  {api: 'Cars', method: 'GET', total: 3},
  {api: 'Cars', method: 'POST', total: 4},
  {api: 'Trucks', method: 'POST', total: 6},
  {api: 'Boats', method: 'GET', total: 6}
]

// 预置需要统计的全量请求方法，默认值为0
const DEFAULT_METHODS = ['GET', 'PUT', 'POST', 'DELETE']

// 按API名称分组聚合
const groupMap = {}
rawData.forEach(item => {
  // 如果分组里还没有当前API，先初始化全方法默认值
  if (!groupMap[item.api]) {
    groupMap[item.api] = DEFAULT_METHODS.map(method => ({
      name: method,
      value: 0
    }))
  }
  // 找到当前方法对应的项，替换统计值
  const targetMethodItem = groupMap[item.api].find(v => v.name === item.method)
  if (targetMethodItem) {
    targetMethodItem.value = item.total
  }
})

// 转换成Highcharts需要的series结构
const packedBubbleSeries = Object.entries(groupMap).map(([apiName, methodData]) => ({
  name: apiName,
  data: methodData
}))

输出结果说明 #

执行上述代码后得到的packedBubbleSeries结构如下，可直接传入Highcharts配置项使用：

[
  {
    name: 'Cars',
    data: [
      {name: "GET", value: 3},
      {name: "PUT", value: 0},
      {name: "POST", value: 4},
      {name: "DELETE", value: 0}
    ]
  },
  {
    name: 'Trucks',
    data: [
      {name: "GET", value: 0},
      {name: "PUT", value: 0},
      {name: "POST", value: 6},
      {name: "DELETE", value: 0}
    ]
  },
  {
    name: 'Boats',
    data: [
      {name: "GET", value: 6},
      {name: "PUT", value: 0},
      {name: "POST", value: 0},
      {name: "DELETE", value: 0}
    ]
  }
]

注：你给出的目标结构示例存在语法问题（数组内直接写键值对不符合JavaScript语法规范），上述输出是Highcharts packedbubble图表要求的标准series格式，传入即可正常渲染。

内容的提问来源于stack exchange，提问作者d_ringer