Google Visualization API - 图表未显示答案

【问题标题】：Google Visualization API - Chart not showingGoogle Visualization API - 图表未显示
【发布时间】：2017-01-17 12:30:52
【问题描述】：

我在使用 Google Visualization API 时遇到问题。

所以，我看不出哪里错了。

这是 HTML 代码（我只留下了重要的部分）：

<html>
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Arquivo CSS --> 
    <link rel="stylesheet" type="text/css" href="style.css">


        <!-- Arquivo js externo --> 
    <script type="text/javascript" src="script.js"></script>

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

    <!-- Arquivos Bootstrap --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head>
<body>

    <div id="line_chart"> <!— The chart should appear here!! —> </div>

</body>

这是 script.js 文件：

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Goiania', 'Jataí', 'Catalão', 'Goiás', 'Total'],
            ['2005',  58,   11,        9,        1,      79  ],
            ['2006',  63,   15,        14,       1,      93  ],
            ['2007',  66,   18,        16,       1,      101 ],
            ['2008',  66,   20,        19,       1,      106 ],
            ['2009',  81,   21,        24,       3,      129 ],
            ['2010',  85,   23,        25,       3,      136 ],
            ['2011',  86,   23,        25,       3,      137 ],
            ['2012',  86,   24,        25,       3,      138 ],
            ['2013',  89,   24,        25,       5,      143 ],
            ['2014',  90,   25,        26,       6,      147 ],
            ['2015',  90,   25,        26,       7,      148 ]
            ]);

        var options = {
          title: 'Testando Gráfico de Anos',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('line_chart'));

        chart.draw(data, options);
      }

我尝试在正文末尾调用我的外部 .js 文件，但也没有成功。我知道我没有在 html 代码中的任何地方调用 drawChart 函数，但我认为该函数设置为在 script.js 文件中调用 onload，至少这是我所理解的。

谢谢大家。 :)（如果代码可能难以理解，我很抱歉，我尽量让它看起来尽可能干净）。

【问题讨论】：

进入JS控制台调用函数。它有什么作用？好像 script.js 越来越 404'd

标签： javascript charts google-visualization

【解决方案1】：

似乎在这里工作正常......

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Goiania', 'Jataí', 'Catalão', 'Goiás', 'Total'],
    ['2005',  58,   11,        9,        1,      79  ],
    ['2006',  63,   15,        14,       1,      93  ],
    ['2007',  66,   18,        16,       1,      101 ],
    ['2008',  66,   20,        19,       1,      106 ],
    ['2009',  81,   21,        24,       3,      129 ],
    ['2010',  85,   23,        25,       3,      136 ],
    ['2011',  86,   23,        25,       3,      137 ],
    ['2012',  86,   24,        25,       3,      138 ],
    ['2013',  89,   24,        25,       5,      143 ],
    ['2014',  90,   25,        26,       6,      147 ],
    ['2015',  90,   25,        26,       7,      148 ]
  ]);

  var options = {
    title: 'Testando Gráfico de Anos',
    legend: { position: 'bottom' }
  };

  var chart = new google.visualization.LineChart(document.getElementById('line_chart'));

  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_chart"> <!— The chart should appear here!! —> </div>

【讨论】：

【解决方案2】：

呃，我发现了错误。我在错误的地方调用脚本。我在正文的末尾调用了我的 script.js 文件和谷歌可视化 api js，现在它工作得很好。感谢所有帮助（或尝试）的人！ ;)

【讨论】：