如何在Google Charts的Ajax调用中处理JSON数组绘制多系列图表？

首先，你遇到的data.addRow is not a function错误，大概率是因为变量名冲突或者没有正确初始化Google Charts的DataTable实例——比如你可能把返回的JSON数据直接赋值给了名为data的变量，覆盖了原本的DataTable对象。下面一步步帮你解决这个问题：

1. 明确数据处理逻辑 #

你的JSON数据里，Protein和Hec是两个独立的数组，每个数组都包含一周七天的计数。要绘制多系列图表，我们需要把同一天的两个系列数据合并到同一行里，这样Google Charts才能正确识别为不同系列。

2. 完整的代码实现 #

以下是修正后的代码，包含Ajax调用、数据处理和图表绘制的完整流程：

// 加载Google Charts库，指定回调函数
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  // 发起Ajax请求获取JSON数据
  $.ajax({
    url: '你的数据源URL', // 替换成你的实际接口地址
    dataType: 'json',
    success: function(jsonData) {
      // 1. 创建一个映射表，按Day存储两个系列的Count值
      const dayDataMap = {};
      
      // 处理Protein系列数据
      jsonData.Protein.forEach(item => {
        dayDataMap[item.Day] = {
          proteinCount: item.Count
        };
      });
      
      // 处理HEC系列数据，补充到对应的Day条目里
      jsonData.Hec.forEach(item => {
        if (dayDataMap[item.Day]) {
          dayDataMap[item.Day].hecCount = item.Count;
        }
      });
      
      // 2. 初始化Google Charts的DataTable
      const data = new google.visualization.DataTable();
      data.addColumn('string', 'Day');
      data.addColumn('number', 'Protein');
      data.addColumn('number', 'HEC');
      
      // 3. 遍历映射表，将数据添加到DataTable中
      Object.keys(dayDataMap).forEach(day => {
        const rowData = [
          day,
          dayDataMap[day].proteinCount,
          dayDataMap[day].hecCount
        ];
        data.addRow(rowData);
      });
      
      // 4. 设置图表选项
      const options = {
        title: 'Weekly Count by Type',
        hAxis: {title: 'Day', titleTextStyle: {color: '#333'}},
        vAxis: {minValue: 0},
        legend: {position: 'top'}
      };
      
      // 5. 绘制图表
      const chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    },
    error: function() {
      console.error('Failed to load data');
    }
  });
}

3. 关键修正点说明 #

• 变量名区分：把返回的JSON数据命名为jsonData，避免和Google Charts的DataTable实例（命名为data）冲突，这是解决addRow is not a function错误的核心。
• 数据合并：通过dayDataMap将两个系列的数据按Day关联，确保每一行都包含同一天的两个系列数值，符合多系列图表的数据格式要求。
• 正确初始化DataTable：使用new google.visualization.DataTable()创建实例，再通过addColumn定义表头，最后用addRow填充数据。

这样处理后，你就能成功绘制出包含Protein和HEC两个系列的Google Charts图表了。

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