TypeError:google.visualization未定义

时间:2017-05-03 18:19:35

标签: javascript jquery charts google-visualization

我一直在尝试将Google Charts API用于我的信息中心,并在firebug上看到这些错误。

TypeError:google.visualization未定义

TypeError: google.visualization is undefined

这是我的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>

2 个答案:

答案 0 :(得分:1)

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

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

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

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

答案 1 :(得分:0)

稍后,但是我遇到了同样的问题。 我的问题是,当我调用函数(我在执行时调用,而不是使用setOnLoadCallback调用)时,对象google.visualization还没有准备好。

所以我稍后用一个间隔调用该函数,它对我有用:

function drawChart(){

    timeout1 = setInterval( 
            function () {
                data = new google.visualization.DataTable();
                data.addColumn('string', 'Colum1');
                data.addColumn('number', 'Colum2');
                data.addColumn('number', 'Colum3');
                data.addColumn('number', 'Colum4');

                chart = new google.visualization.LineChart(document.getElementById('div_Chart'));
                .
                .
                .
                clearInterval(timeout1);
            }, 100);   
}

希望对您有帮助。