Fatal编程技术网

Google visualization google图表工具栏未显示/执行

google-visualization

Google visualization google图表工具栏未显示/执行,google-visualization,Google Visualization,我是新来的，是朋友介绍的。我正在使用谷歌图表，连接到谷歌工作表。我的图表运行得很好。下一步是在底部添加工具栏。但是，无论如何，我都无法让代码正常工作。我甚至试着复制和粘贴到一个空白页上只是为了测试，但我甚至不能让他们的例子显示出来。文档中是否缺少阻止这种情况发生的内容？ 这是我的密码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

我是新来的，是朋友介绍的。我正在使用谷歌图表，连接到谷歌工作表。我的图表运行得很好。下一步是在底部添加工具栏。但是，无论如何，我都无法让代码正常工作。我甚至试着复制和粘贴到一个空白页上只是为了测试，但我甚至不能让他们的例子显示出来。文档中是否缺少阻止这种情况发生的内容？ 这是我的密码：

    <!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>


无标题文件
//加载可视化API和piechart包。
load（'current'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
google.charts.setOnLoadCallback（drawChart）；
//创建并填充数据表的回调，
//实例化饼图，传入数据并
//画它。
函数drawAll（）{drawChart（）；drawToolbar（）；}
函数绘图图（）{
var query=new google.visualization.query（“https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5");
发送（handleQueryResponse）；
}
函数handleQueryResponse（响应）{
var data=response.getDataTable（）；
变量选项={
‘头衔’：‘大学准备就绪’，
'titleTextStyle'：{fontSize:'24'，颜色：'teal'}，
//“宽度”：800，
‘高度’：600，
哈克斯：{'title'：'school Year'，'textStyle'：{bold:true，fontSize:'16'}，
变量：{'title'：'Percent of student Ready'，'format'：'Percent'，'textStyle'：{color:'gray'，fontSize:'9'}，
图例：{'position'：'top'}，
系列：{
0:{pointsVisible:true，颜色：'orange'}，
1:{pointsVisible:true，颜色：'blue'}，
2:{pointsVisible:true，颜色：'black'}，
3:{pointsVisible:true，pointShape:'square'，pointSize:'14'，color:'maroon'}
}
};
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
//图表绘制（数据、选项）；
函数drawToolbar（）{
变量组件=[
{类型：'html'，数据源：'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'},
{类型：'csv'，数据源：'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（容器、组件）；
};
google.charts.setOnLoadCallback（drawAll）；
}
在这里似乎可以工作，只需做一些小的调整

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

//加载可视化API和piechart包。
google.charts.load（'current'{
回调：图纸，
软件包：['corechart']
});
函数绘图图（）{
var query=new google.visualization.query（“https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5");
发送（handleQueryResponse）；
}
函数handleQueryResponse（响应）{
var data=response.getDataTable（）；
变量选项={
‘头衔’：‘大学准备就绪’，
'titleTextStyle'：{fontSize:'24'，颜色：'teal'}，
//“宽度”：800，
‘高度’：600，
哈克斯：{'title'：'school Year'，'textStyle'：{bold:true，fontSize:'16'}，
变量：{'title'：'Percent of student Ready'，'format'：'Percent'，'textStyle'：{color:'gray'，fontSize:'9'}，
图例：{'position'：'top'}，
系列：{
0:{pointsVisible:true，颜色：'orange'}，
1:{pointsVisible:true，颜色：'blue'}，
2:{pointsVisible:true，颜色：'black'}，
3:{pointsVisible:true，pointShape:'square'，pointSize:'14'，color:'maroon'}
}
};
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
变量组件=[
{类型：'html'，数据源：'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'},
{类型：'csv'，数据源：'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（容器、组件）；
}
在这里似乎可以工作，只需做一些小的调整

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

//加载可视化API和piechart包。
google.charts.load（'current'{
回调：图纸，
软件包：['corechart']
});
函数绘图图（）{
var query=new google.visualization.query（“https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5");
发送（handleQueryResponse）；
}
函数handleQueryResponse（响应）{
var data=response.getDataTable（）；
变量选项={
‘头衔’：‘大学准备就绪’，
'titleTextStyle'：{fontSize:'24'，颜色：'teal'}，
//“宽度”：800，
‘高度’：600，
哈克斯：{'title'：'school Year'，'textStyle'：{bold:true，fontSize:'16'}，
变量：{'title'：'Percent of student Ready'，'format'：'Percent'，'textStyle'：{color:'gray'，fontSize:'9'}，
图例：{'position'：'top'}，
系列：{
0:{pointsVisible:true，颜色：'orange'}，
1:{pointsVisible:true，颜色：'blue'}，
2:{点