来自单个Google Sheet的多个图表赢得't显示

Multiple charts from single Google Sheet won't display

本文关键字:显示 Google 单个 Sheet      更新时间:2023-09-26

我正在使用图表库和谷歌电子表格作为数据源,用谷歌分析数据构建一个仪表板。我为每个图表设置了一个函数,每个图表都有自己的查询表。就个人而言,一切都是可行的。当我一起运行它们时,我会间歇性地只得到第二个图表或数据错误Pie chart should have a first column of type string

我看到了一些暗示这个问题的答案,但没有任何帮助解决这个问题。

以下是我迄今为止绘制这两个图表的javascript:

// Load Charts and the corechart package.
google.charts.load('current', {'packages': ['corechart']});
// Draw the line chart for Reach when Charts is loaded.
google.charts.setOnLoadCallback(drawcpReach);
// Draw the pie chart for the UserType when Charts is loaded.
google.charts.setOnLoadCallback(drawcpUserType);
// Callback that draws the line chart for Reach.
function drawcpReach() {
  // Create the data table for Reach.
  var queryString = encodeURIComponent('SELECT A, B, C, D');
  var sheetName = 'cp_data'
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1wH9Z3hA4iwRLC5IA6z4G3EKucSmW5lvGfiAkKLDDme0/gviz/tq?sheet=' + sheetName + '&headers=1&tq=' + queryString);
  query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  var data = response.getDataTable();
  // Set options for Reach.
  var options = {
    height: 450,
    legend: {
      position: 'none'
    },
    colors: ['#68b3c8', '#eb5e28', '#f3bb45']
  };
  // Instantiate and draw the line chart for Reach.
  var chart = new google.visualization.LineChart(document.getElementById('cp-reach'));
  chart.draw(data, options);
}
// Callback that draws the pie chart for UserType.
function drawcpUserType() {
  // Create the data table for UserType.
  var sheetName = 'cp_data'
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1wH9Z3hA4iwRLC5IA6z4G3EKucSmW5lvGfiAkKLDDme0/gviz/tq?sheet=' + sheetName + '&headers=1&range=E1:F3');
  query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  var data = response.getDataTable();
  // Set options for UserType.
  var options = {
    height: 450,
    legend: {
      position: 'none'
    },
    colors: ['#68b3c8', '#eb5e28']
  };
  // Instantiate and draw the chart for UserType.
  var chart = new google.visualization.PieChart(document.getElementById('user-type'));
  chart.draw(data, options);
}

我还准备了一把小提琴,和我一起工作。

刚刚出现了几个"syntax'错误。。。

1.图表找不到容器
需要使用id属性而不是class
<div id="cp-reach"></div>

<div class="cp-reach"></div>

2.不能在同一范围内有两个同名的回调函数
将其中一个handleQueryResponse重命名为handleQueryResponse2

3.(小问题)var gid缺少分号
var gid = '333437552';

否则,请参阅工作示例。。。

// Load Charts and the corechart package.
google.charts.load('current', {
  callback: function () {
    drawcpReach();
    drawcpUserType();
  },
  packages:['corechart']
});
// Callback that draws the line chart for Reach.
function drawcpReach() {
  // Create the data table for Reach.
  var queryString = encodeURIComponent('SELECT A, B, C, D');
  var gid = '333437552';
  var query = new google.visualization.Query(
    'https://docs.google.com/spreadsheets/d/1wH9Z3hA4iwRLC5IA6z4G3EKucSmW5lvGfiAkKLDDme0/gviz/tq?gid=' + gid +
    '&headers=1&tq=' +
    queryString
  );
  query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  var data = response.getDataTable();
  // Set options for Reach.
  var options = {
    height:450,
    legend: {position: 'none'},
    colors: ['#68b3c8', '#eb5e28', '#f3bb45']
  };
  // Instantiate and draw the line chart for Reach.
  var chart = new google.visualization.LineChart(document.getElementById('cp-reach'));
  chart.draw(data, options);
}
// Callback that draws the pie chart for UserType.
function drawcpUserType() {
  // Create the data table for UserType.
  var gid = '825312987';
  var query = new google.visualization.Query(
    'https://docs.google.com/spreadsheets/d/1wH9Z3hA4iwRLC5IA6z4G3EKucSmW5lvGfiAkKLDDme0/gviz/tq?gid=' + gid +
    '&headers=1&range=A15:B17');
  query.send(handleQueryResponse2);
}
function handleQueryResponse2(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  var data = response.getDataTable();
  // Set options for UserType.
  var options = {
    height: 450,
    legend: {position: 'none'},
    colors: ['#68b3c8', '#eb5e28']
  };
  // Instantiate and draw the chart for UserType.
  var chart = new google.visualization.PieChart(document.getElementById('user-type'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="cp-reach"></div>
<div id="user-type"></div>