来自单个 Google 表格的多个图表不会显示

Question

我正在使用图表库和 Google 电子表格作为我的数据源来构建一个包含 Google Analytics 数据的仪表板。我为每个图表设置了一个函数，每个图表都有自己对工作表的查询。个人而言，一切正常。当我一起运行它们时，我会间歇性地得到第二张图表或数据错误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);
}

我还有一个正在使用的fiddle set up。

Answer 1

只是有几个'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>