Question

我是新来的，朋友推荐。我正在使用Google图表，连接到Google表格。我的图表工作正常。下一步是在其底部添加一个工具栏。但是，无论如何，我都无法使代码工作。我甚至尝试将Google's example code复制并粘贴到一个空白页面进行测试，但我甚至无法展示他们的例子。是否有文件中缺少某些东西阻止了这一点？这是我的代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- datasheet link https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/edit?usp=sharing 
https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/pubhtml
-->

    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
       function drawAll() {drawChart(); drawToolbar();}

        function drawChart() {
          var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5");
          query.send(handleQueryResponse);
        }

        function handleQueryResponse(response) {
        var data = response.getDataTable();
        var options = {
            'title':'College Readiness',
            'titleTextStyle': {fontSize: '24', color: 'teal'},
            //'width':800,
            'height':600,
            hAxis: {'title': 'Academic Year', 'textStyle': {bold: true, fontSize: '16'}},
            vAxis: {'title': 'Percent of Students Ready', 'format': 'percent','textStyle': {color: 'gray', fontSize: '9'}},
            legend: {'position': 'top'},
            series: {
                0: {pointsVisible: true, color: 'orange'},
                1: {pointsVisible: true, color: 'blue'},
                2: {pointsVisible: true, color: 'black'},
                3: {pointsVisible: true, pointShape: 'square', pointSize: '14', color: 'maroon'}
            }
            };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        //chart.draw(data, options);

    function drawToolbar() {
      var components = [
          {type: 'html', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'},
          {type: 'csv', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'}
      ];

      var container = document.getElementById('toolbar_div');
      google.visualization.drawToolbar(container, components);
          };

google.charts.setOnLoadCallback(drawAll);
        }
  </script>

        </head>

<body>
<!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
    <div id="toolbar_div"></div>
</body>
</html>

Answer 1

似乎在这里工作，只做了一些小的调整。

通常，setOnLoadCallback每页只能调用一次这很可能是问题所在在这里，我在callback语句中定义了load。

＆＃13;

// Load the Visualization API and the piechart package.
google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5");
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  var data = response.getDataTable();
  var options = {
    'title':'College Readiness',
    'titleTextStyle': {fontSize: '24', color: 'teal'},
    //'width':800,
    'height':600,
    hAxis: {'title': 'Academic Year', 'textStyle': {bold: true, fontSize: '16'}},
    vAxis: {'title': 'Percent of Students Ready', 'format': 'percent','textStyle': {color: 'gray', fontSize: '9'}},
    legend: {'position': 'top'},
    series: {
        0: {pointsVisible: true, color: 'orange'},
        1: {pointsVisible: true, color: 'blue'},
        2: {pointsVisible: true, color: 'black'},
        3: {pointsVisible: true, pointShape: 'square', pointSize: '14', color: 'maroon'}
    }
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);

  var components = [
    {type: 'html', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'},
    {type: 'csv', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'}
  ];

  var container = document.getElementById('toolbar_div');
  google.visualization.drawToolbar(container, components);
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="toolbar_div"></div>
<div id="chart_div"></div>

＆＃13;

谷歌图表工具栏没有显示/执行

1 个答案: