使用JavaScript动态绘制Google饼图失败：仅显示单个切片求助

你遇到的问题核心是Google饼图的DataTable数据结构不符合要求。饼图需要的是「类别列 + 数值列」的结构，每一行对应一个切片；但你当前代码里定义了三列（Task、Failed、Passed），还把两个数值放在同一行的不同列，饼图只能识别到第一列数值（也就是80），所以只会显示单一切片。

// 先提前定义饼图配置（根据你的需求调整）
var options = {
  title: '测试结果统计',
  width: 350,
  height: 250,
  is3D: true
};

for (var g = 0; g < 3; g++) {
  var data = new google.visualization.DataTable();
  // 饼图只需要两列：类别（string）和对应数值（number）
  data.addColumn('string', '结果类型');
  data.addColumn('number', '占比');
  // 把Failed和Passed拆分成两行数据，每行对应一个饼图切片
  data.addRows([
    ['Failed', 80],
    ['Passed', 20]
  ]);
  
  var chartName = 'piechart' + (g + 1);
  var chart = new google.visualization.PieChart(document.getElementById(chartName));
  chart.draw(data, options);
}

• 调整列结构：移除了多余的Passed列，只保留类别和数值两列，完全匹配饼图的数据规范。
• 拆分数据行：把原来同一行的两个数值拆成独立的两行，每行对应一个切片的类别和数值，这样饼图就能正确识别并生成80%和20%的双切片效果。
• 循环逻辑保持原有思路，同时确保每个图表都使用独立的正确DataTable，避免变量作用域导致的潜在问题。

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