在google Chart API (Javascript)中使用多个工作表

在Google Chart API (JavaScript)中使用多个工作表

Google Chart API (JavaScript)允许开发者通过Google Sheets作为数据源来创建动态图表。当需要使用多个工作表时，可以通过以下几种方式实现：

基础概念

Google Chart API通过Google Visualization API与Google Sheets集成，可以从一个或多个工作表中提取数据来生成图表。

实现方法

方法1：使用单个电子表格中的多个工作表

// 加载Google Visualization API和核心图表包
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawCharts);

function drawCharts() {
  // 电子表格ID和工作表名称
  var spreadsheetId = '你的电子表格ID';
  var sheet1Name = '工作表1';
  var sheet2Name = '工作表2';
  
  // 创建查询
  var query1 = new google.visualization.Query(
    'https://docs.google.com/spreadsheets/d/' + spreadsheetId + '/gviz/tq?sheet=' + sheet1Name + '&headers=1');
  
  var query2 = new google.visualization.Query(
    'https://docs.google.com/spreadsheets/d/' + spreadsheetId + '/gviz/tq?sheet=' + sheet2Name + '&headers=1');
  
  // 发送查询并处理结果
  query1.send(handleQueryResponse1);
  query2.send(handleQueryResponse2);
}

function handleQueryResponse1(response) {
  if (response.isError()) {
    console.error('Error: ' + response.getMessage());
    return;
  }
  
  var data = response.getDataTable();
  var chart = new google.visualization.LineChart(document.getElementById('chart_div1'));
  chart.draw(data, {title: '工作表1数据图表'});
}

function handleQueryResponse2(response) {
  if (response.isError()) {
    console.error('Error: ' + response.getMessage());
    return;
  }
  
  var data = response.getDataTable();
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
  chart.draw(data, {title: '工作表2数据图表'});
}

方法2：合并多个工作表数据

function drawMergedChart() {
  var spreadsheetId = '你的电子表格ID';
  var sheet1Query = new google.visualization.Query(
    'https://docs.google.com/spreadsheets/d/' + spreadsheetId + '/gviz/tq?sheet=工作表1');
  
  var sheet2Query = new google.visualization.Query(
    'https://docs.google.com/spreadsheets/d/' + spreadsheetId + '/gviz/tq?sheet=工作表2');
  
  // 使用Promise.all处理多个查询
  Promise.all([
    new Promise(resolve => sheet1Query.send(response => resolve(response))),
    new Promise(resolve => sheet2Query.send(response => resolve(response)))
  ]).then(responses => {
    // 检查错误
    if (responses[0].isError() || responses[1].isError()) {
      console.error('查询错误:', responses[0].getMessage() || responses[1].getMessage());
      return;
    }
    
    // 获取数据表
    var data1 = responses[0].getDataTable();
    var data2 = responses[1].getDataTable();
    
    // 合并数据
    var mergedData = new google.visualization.DataTable();
    // 添加列
    for (var i = 0; i < data1.getNumberOfColumns(); i++) {
      mergedData.addColumn(data1.getColumnType(i), data1.getColumnLabel(i));
    }
    
    // 添加行
    for (var i = 0; i < data1.getNumberOfRows(); i++) {
      mergedData.addRow(data1.getValues(i));
    }
    for (var i = 0; i < data2.getNumberOfRows(); i++) {
      mergedData.addRow(data2.getValues(i));
    }
    
    // 绘制合并后的图表
    var chart = new google.visualization.LineChart(document.getElementById('merged_chart_div'));
    chart.draw(mergedData, {title: '合并工作表数据图表'});
  });
}

优势

数据分离：不同工作表可以存储不同类型或来源的数据
维护方便：可以单独更新某个工作表而不影响其他图表
性能优化：只加载需要的数据，减少不必要的数据传输
权限控制：可以为不同工作表设置不同的访问权限

应用场景

仪表盘展示来自不同部门的数据
比较不同时间段的数据趋势
展示关联但结构不同的数据集
需要从多个数据源聚合数据的场景

常见问题及解决方案

问题1：跨工作表查询失败

原因：工作表名称不正确或没有访问权限

解决方案：

检查工作表名称是否准确
确保电子表格已共享给需要访问的用户
使用try-catch捕获错误并提供友好的错误信息

问题2：数据格式不一致导致图表错误

原因：不同工作表的数据结构不一致

解决方案：

在合并前验证数据结构
使用数据视图转换数据格式
添加数据预处理步骤

// 数据预处理示例
function preprocessData(dataTable) {
  var view = new google.visualization.DataView(dataTable);
  // 转换或过滤数据
  return view;
}

问题3：性能问题

原因：加载多个大型工作表导致延迟

解决方案：

限制查询范围（使用range参数）
使用缓存
异步加载图表

// 限制查询范围示例
var query = new google.visualization.Query(
  'https://docs.google.com/spreadsheets/d/' + spreadsheetId + 
  '/gviz/tq?sheet=' + sheetName + '&range=A1:D100');

通过以上方法，您可以有效地在Google Chart API中使用多个工作表来创建丰富的数据可视化应用。