TypeError：google.visualization未定义 [英] TypeError: google.visualization is undefined

问题描述

我正在尝试使用Google图表API，但遇到我无法理解的错误：

b
$ b

 < script type =text / javascriptsrc =https://www.google.com/jsapi>< / script> ; 
< script type =text / javascriptsrc =js / statistics / overview.js>< / script> 
  

overview.js中的代码如下所示：

  var statisticsOverview = {
 init：function（）{
 google.load（visualization，1，{packages：[corechart ]}）; 
 google.setOnLoadCallback（this.drawIncomeChart（））; 
 google.setOnLoadCallback（this.drawExpensesChart（））; 
 google.setOnLoadCallback（this.drawEconomiesChart（））; 
} 
 drawIncomeChart：function（）{
 var data = [
 ['Year'，'Income']，
 ['October 2013'，1000] ，
 ['2014年1月'，1170]，
 ['2014年3月'，660] 
]; 
 var options = {
 title：'收益表现'，
颜色：['green'] 
}; 
 var id ='chart_income'; 
 
 this.drawLineChart（data，options，id）; 
} 
 drawExpensesChart：function（）{
 var data = [
 ['Year'，'Expense']，
 ['October 2013'，1000] ，
 ['2014年1月'，1170]，
 ['2014年3月'，660] 
]; 
 var options = {
 title：'费用表现'，
颜色：['red'] 
}; 
 var id ='chart_expenses'; 
 this.drawLineChart（data，options，id）; 
}，
 drawEconomiesChart：function（）{
 var data = [
 ['Year'，'Savings']，
 ['2004'，1000]， 
 ['2005'，1170]，
 ['2006'，660]，
 ['2007'，1030] 
]; 
 
 var options = {
 title：'储蓄表现'，
颜色：['orange'] 
}; 
 
 var id ='chart_economies'; 
 this.drawLineChart（data，options，id）; 
}，
 drawLineChart：function（data，options，id）{
 console.log（google.visualization）; 
 var chartData = google.visualization.arrayToDataTable（data）; 
 
 var chart = new google.visualization.LineChart（document.getElementById（id））; 
 chart.draw（chartData，options）; 
} 
}; 
 
 statisticsOverview.init（）; 
  

这很奇怪，因为console.log（）会给我带有属性可视化的google对象。我做错了什么？ 解决方案

计时问题。通常情况下，您需要像谷歌图表一样调用

  google.load（visualization，1，{packages：[corechart] }）; 
 google.setOnLoadCallback（drawChart）; 
函数drawChart（）{
 ... 
} 
  

所以，当可视化包加载函数被调用时就会被调用。

现在，在你的情况下，所有事情都会在晚些时候完成，所以你必须这样做：

  google.load（visualization，1，{packages：[corechart]}）; 
 
函数doStats（）{
 
 var statisticsOverview = {
 init：function（）{
 console.log（'init'）; 
 this.drawIncomeChart（）; 
 this.drawExpensesChart（）; 
 this.drawEconomiesChart（）; 
}，
 ... 
}; 
 
 statisticsOverview.init（）
} 
 
 google.setOnLoadCallback（doStats）; 
  

类似的结果可以使用

 setTimeout（function（）{
 statisticsOverview.init（）; 
}，3000）; 
  

无包装功能。

I'm trying to work with Google charts API, but I get an error I can't understand:

Here is my code:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/statistics/overview.js"></script>

And the code from overview.js is like this:

var statisticsOverview = {
    init: function() {
        google.load("visualization", "1", {packages: ["corechart"]});
        google.setOnLoadCallback(this.drawIncomeChart());
        google.setOnLoadCallback(this.drawExpensesChart());
        google.setOnLoadCallback(this.drawEconomiesChart());
    },
    drawIncomeChart: function() {
        var data = [
            ['Year', 'Income'],
            ['October 2013', 1000],
            ['January 2014', 1170],
            ['March 2014', 660]
        ];
        var options = {
            title: 'Income Performance',
            colors: ['green']
        };
        var id = 'chart_income';

        this.drawLineChart(data, options, id);
    },
    drawExpensesChart: function() {
        var data = [
            ['Year', 'Expense'],
            ['October 2013', 1000],
            ['January 2014', 1170],
            ['March 2014', 660]
        ];
        var options = {
            title: 'Expense Performance',
            colors: ['red']
        };
        var id = 'chart_expenses';
        this.drawLineChart(data, options, id);
    },
    drawEconomiesChart: function() {
        var data = [
            ['Year', 'Savings'],
            ['2004', 1000],
            ['2005', 1170],
            ['2006', 660],
            ['2007', 1030]
        ];

        var options = {
            title: 'Savings Performance',
            colors: ['orange']
        };

        var id = 'chart_economies';
        this.drawLineChart(data, options, id);
    },
    drawLineChart: function(data, options, id) {
        console.log(google.visualization);
        var chartData = google.visualization.arrayToDataTable(data);

        var chart = new google.visualization.LineChart(document.getElementById(id));
        chart.draw(chartData, options);
    }
};

statisticsOverview.init();

This is strange, because console.log() will give me the google object with the property visualization. What am I doing wrong?

解决方案

Timing problem. Typically you call google chart like

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
  ...
  }

So, when visualization package is loaded function to draw is called.

Now, in your case everything is done later, so you have to do:

google.load("visualization", "1", {packages: ["corechart"]});

function doStats() {

var statisticsOverview = {
    init: function() {
        console.log('init');
        this.drawIncomeChart();
        this.drawExpensesChart();
        this.drawEconomiesChart();
    },
    ...
};    

statisticsOverview.init()
}

google.setOnLoadCallback(doStats);

Similar result can be get using

setTimeout(function() {
    statisticsOverview.init();
}, 3000);

without wrapper function.

这篇关于TypeError：google.visualization未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！