Question

当我以前使用谷歌图表时，我能够使用脚本标签一次插入一个图表，因此我将为每个谷歌图表单独使用脚本标记。以下是一个例子：

最近，我一直在努力用使用Google Spreadsheets数据表的图表替换这些图表。但是，当对这些图表使用相同的想法时，会出现问题，它们似乎出现了，几乎就像一个图表正在替换另一个图表。

我感觉它与setOnLoadCallBack函数有关，但我不确定它在之前的设置中是否有效。我附上了第二组图表的JSFiddle：

供参考，以下是我正在使用的新图表模板的模板：

<script>
    google.load("visualization", '1', {packages:['corechart', 'bar']});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
          var query = new google.visualization.Query(
              'https://docs.google.com/spreadsheets/d/1Fp3iz5zmzF4KgnlF4Me4OA3c8Msu0FV4_x1eS16WN-0/edit?usp=sharing');
            query.setQuery('SELECT A, B, C, D');
          query.send(handleQueryResponse);
        }

        function handleQueryResponse(response) {
          if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
          }

          var data = response.getDataTable();
            for (var i = 0; i < data.getNumberOfColumns(); i++) {
                console.log(data.getColumnType(i));
            }
          var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
          chart.draw(data);
        }
        </script>

Answer 1

您正在为第二个图表使用相同的函数名称。请参阅以下代码。

<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
	google.load("visualization", '1', {packages:['corechart', 'bar']});
		google.setOnLoadCallback(drawChart);
		google.setOnLoadCallback(drawChart_1);
		function drawChart() {
		  var query = new google.visualization.Query(
			  'https://docs.google.com/spreadsheets/d/1Fp3iz5zmzF4KgnlF4Me4OA3c8Msu0FV4_x1eS16WN-0/edit?usp=sharing');
            query.setQuery('SELECT A, B, C, D');
		  query.send(handleQueryResponse);
		}

		function handleQueryResponse(response) {
		  if (response.isError()) {
			alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
			return;
		  }

		  var data = response.getDataTable();
            for (var i = 0; i < data.getNumberOfColumns(); i++) {
            }
		  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
		  chart.draw(data);
		}
    
		function drawChart_1() {
		  var query = new google.visualization.Query(
			  'https://docs.google.com/spreadsheets/d/1Fp3iz5zmzF4KgnlF4Me4OA3c8Msu0FV4_x1eS16WN-0/edit?usp=sharing');
            query.setQuery('SELECT A, E, F');
		  query.send(handleQueryResponse_1);
		}

		function handleQueryResponse_1(response) {
		  if (response.isError()) {
			alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
			return;
		  }

		  var data = response.getDataTable();
            for (var i = 0; i < data.getNumberOfColumns(); i++) {
            }
		  var chart = new google.visualization.ColumnChart(document.getElementById('testchart'));
		  chart.draw(data);
		}
		</script>
</head>
	<body>
	<div id='columnchart'></div>
  </body>
  <body>
  <div id='testchart'></div>
  </body>

来自一个Google电子表格的多个Google图表仅显示1个图表

1 个答案: