javascript - TypeError : google. 可视化未定义

Question

我一直在尝试在仪表板上使用 Google Charts API，并在 firebug 上看到这些错误。

类型错误:google.visualization 未定义

这是我的 JS 代码:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>  
<script type="text/javascript">
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Title', 'Values'],
            ['TBK', 8],
            ['Fluor Corp', 12],
            ['Fluor Group', 41],
            ['Bechtel', 39]
        ]);

        var options = {
            legend: 'none',
            pieSliceText: 'none',
            chartArea: {
                width: '90%',
                height: '90%',
            },
            colors:['#fa424a','#ac6bec','#fdad2a','#00a8ff','#46c35f','#e84f9a'],
            slices: {
                0: { color: '#fa424a' },
                1: { color: '#ac6bec' },
                2: { color: '#fdad2a' },
                3: { color: '#00a8ff' }
            },
            pieHole: 0.8,
            tooltip: { trigger: 'none' }
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
    }
</script>

Answer 1

使用回调之前需要加载库...

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

您还可以将回调添加到加载语句中...

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

或者使用 load 语句返回的 promise ...

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