Question

我在使用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，至少这是我所理解的。

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

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

Answer 2

呃，我发现了错误。我在错误的地方调用脚本。我调用了我的script.js文件和身体末端的google visual api js，现在它工作得很好。谢谢所有帮助（或尝试过）的人！ ;）

Google Visualization API - 图表未显示

2 个答案: