Google Charts提示框显示字符串而非数字及行尺寸匹配报错求助

这个报错其实很好定位——它直接告诉你：你给DataTable定义了3列，但传入的行数据的元素数量和列数不匹配，要么多了要么少了。结合你的需求（用对象数组、基于字符串+时间值生成饼图、悬停显示秒数），我给你整理了完整的解决方案：

第一步：明确错误根源 #

Google Charts的DataTable要求每一行的元素数量必须和你定义的列数完全一致。比如你用addColumn定义了3列，那每一行数组必须有3个元素，多一个少一个都会触发这个报错。

第二步：完整的修正代码 #

假设你的原始数据是类似这样的对象数组（包含类别字符串和时间格式的字符串）：

const taskData = [
  { name: "会议沟通", time: "00:02:45" },
  { name: "代码开发", time: "00:15:30" },
  { name: "测试调试", time: "00:08:10" }
];

下面是可以正常运行的代码，包含时间转秒、匹配列数、自定义tooltip的逻辑：

// 加载Google Charts核心包
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawPieChart);

function drawPieChart() {
  // 1. 定义DataTable的列：3列分别对应类别、秒数、自定义tooltip
  const dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', '任务类型'); // 第一列：类别字符串
  dataTable.addColumn('number', '耗时（秒）'); // 第二列：转换后的秒数（数值型，饼图需要数值）
  dataTable.addColumn({type: 'string', role: 'tooltip'}); // 第三列：tooltip角色，控制悬停显示内容

  // 2. 处理原始数据：把时间转成秒，并生成符合列数要求的行数组
  const chartRows = taskData.map(task => {
    // 解析时间字符串为总秒数
    const [hours, minutes, seconds] = task.time.split(':').map(Number);
    const totalSeconds = hours * 3600 + minutes * 60 + seconds;
    // 返回长度为3的数组，和列数严格匹配
    return [task.name, totalSeconds, `耗时：${totalSeconds}秒`];
  });

  // 3. 把行数据添加到DataTable
  dataTable.addRows(chartRows);

  // 4. 设置图表配置选项
  const chartOptions = {
    title: '任务耗时分布',
    width: 600,
    height: 400,
    tooltip: { trigger: 'focus' } // 确保悬停时显示自定义tooltip
  };

  // 5. 渲染饼图到页面元素
  const pieChart = new google.visualization.PieChart(document.getElementById('piechart-container'));
  pieChart.draw(dataTable, chartOptions);
}

关键注意事项 #

• 严格匹配列数和行长度：这是解决你报错的核心！比如上面代码定义了3列，所以每一行必须是3个元素的数组，不能多也不能少。
• 时间转秒的逻辑：饼图的数值列必须是数字类型，所以一定要把HH:MM:SS格式的字符串转换成总秒数。
• 自定义tooltip：通过添加role: 'tooltip'的列，可以完全控制悬停时显示的内容，完美实现你要的显示秒数的需求。

常见错误场景排查 #

如果你还是遇到类似报错，可以检查这几点：

• 有没有不小心多定义了一列，或者少定义了一列？
• 处理行数据时，是不是漏掉了某个元素（比如忘记加tooltip内容）？
• 是不是有部分行数据的长度和其他行不一致？

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