Javascript如何格式化JSON数据为饼图所需的DataTable格式

你的实现思路逻辑清晰，完全可落地，下面提供更精简的原生JS实现方案，无需额外依赖：

核心数据转换代码 #

// 替换为实际接口返回的JSON数据
const apiResult = {"data": [{"status": 409},{"status": 200},{"status": 404},{"status": 200},{"status": 200},{"status": 200}]};

// 统计各状态码出现次数
const statusCountMap = apiResult.data.reduce((result, item) => {
  const statusCode = String(item.status);
  result[statusCode] = (result[statusCode] || 0) + 1;
  return result;
}, {});

// 直接生成符合要求的DataTable格式
const pieChartData = [
  ['status', 'count'],
  ...Object.entries(statusCountMap).sort((a, b) => Number(a[0]) - Number(b[0]))
];

方案优势 #

• 用reduce方法一步完成状态码提取、计数统计，省去单独存储全量状态码、去重的冗余步骤
• Object.entries直接生成[状态码, 计数]的二维数组结构，无需手动拼接，不会出现多余逗号问题
• 内置按状态码数值升序排序逻辑，完美适配后续按2xx、4xx、5xx分类配色的需求

适配Google Charts示例 #

拿到上面的pieChartData后，可以直接传入Google Charts的转换方法使用：

google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawPieChart);

function drawPieChart() {
  const data = google.visualization.arrayToDataTable(pieChartData);
  const options = {
    title: 'HTTP请求状态分布',
    slices: {
      0: { color: '#2ECC71' }, // 排序后首位为2xx状态，标绿
      3: { color: '#E74C3C' } // 对应5xx状态的索引位标红即可
    }
  };
  const chart = new google.visualization.PieChart(document.getElementById('chartContainer'));
  chart.draw(data, options);
}

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