如何使用Google Line Chart绘制不同长度数组的折线图

我来帮你搞定这个Google Line Chart的问题～首先得明确一个核心规则：Google Line Chart要求每一行数据的长度必须和表格的列数完全匹配，你现在遇到的问题就是因为部分日期下有的关键词没有对应数据，导致生成的行数组长度和列数不匹配，图表自然没法正常渲染。

问题根源拆解 #

你的列是按所有关键词的数量来添加的（1个日期列 + N个关键词数值列），但部分日期的行数据里，有些关键词没有对应值，所以数组长度不够，和列数对不上。这时候我们需要给缺失的数据填充null，这样图表就会自动跳过这些点，不会报错，还能正确展示折线。

修改后的代码方案 #

// 1. 初始化数据表，先添加日期列
var data = new google.visualization.DataTable();
data.addColumn('date', '日期');

// 2. 提取所有关键词，添加对应的数值列
var allKeywords = data1.queryA.map(item => item.keyword);
allKeywords.forEach(keyword => {
  data.addColumn('number', keyword);
});

// 3. 处理每个日期的数据行，确保长度和列数一致
data1.query.forEach(queryItem => {
  // 先创建包含当前日期的基础数组
  var row = [new Date(queryItem.datee)];
  
  // 遍历所有关键词，匹配对应数据，缺失则填null
  allKeywords.forEach(keyword => {
    // 这里假设你的date数组元素包含keyword和page字段，根据实际结构调整匹配逻辑
    var matchedData = queryItem.date.find(item => item.keyword === keyword);
    row.push(matchedData ? parseInt(matchedData.page) : null);
  });
  
  // 将处理好的行添加到数据表
  data.addRow(row);
});

关键细节说明 #

• 我假设你的queryItem.date数组里的每个元素是包含keyword和page字段的对象（比如{keyword: "xxx", page: "45"}），如果你的数据结构不一样，只需调整find的匹配条件即可。
• 填充null后，Google Line Chart会自动忽略这些缺失点；如果希望折线自动连接缺失的位置，可以在绘制图表时设置interpolateNulls: true选项。
• 原来的代码直接拼接page值，没有考虑关键词的对应关系和缺失情况，现在的逻辑是严格按列的关键词顺序填充数据，确保每行长度和列数完全匹配。

内容的提问来源于stack exchange，提问作者sooraj s pillai