Google chart object error: google not defined

Question

我已经测试了一些独立代码，这些代码基于 Google 图表对象的任意数据创建图表，但我运行遇到了将此代码合并到我的对象中的障碍创建实际数据。我正在尝试调用以下图表函数，但出现“google 未定义错误：

”

function costChart() {
        var energyType = 'Monthly Cost';
        var energySavings = [1,2,3,4,5,6,7,8,9,10,11,12]; //=this.costSavings
        var month = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Month');
        data.addColumn('number', energyType + ' Saved');


        data.addRows([
          [month[0], energySavings[0]],
          [month[1], energySavings[1]],
          [month[2], energySavings[2]],
          [month[3], energySavings[3]],
          [month[4], energySavings[4]],
          [month[5], energySavings[5]],
          [month[6], energySavings[6]],
          [month[7], energySavings[7]],
          [month[8], energySavings[8]],
          [month[9], energySavings[9]],
          [month[10], energySavings[10]],
          [month[11], energySavings[11]]
        ]);

        // Set chart options
        var options = {'title': 'Cost Savings',
                       'width':400,
                       'height':300,
                       'hAxis':{format: 'currency'}
                      };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.BarChart(document.getElementById('cost_chart_div'));
        chart.draw(data, options);
      }

我使用类似于下面的代码来调用它。理想情况下，我希望上面的函数成为名为 Project 的对象的一部分，这样我就可以这样调用它：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
var project1 = newProject();
//some calculations to get the costSavings property data...
project1.costChart();

然后使用 Project 对象中的属性为图表功能设置数据。（在costChart函数的第三行可以看到这个被注释掉了）

我似乎无法摆脱 'google not defined' 错误。我已经尝试将脚本添加到该部分，但仍然不行。我尝试通过将对象作为 arg 传递给它来单独调用该函数，但仍然出现相同的错误。我有一种感觉，这可能是由于我应该包括的方式：

  google.load('visualization', '1.0', {'packages':['corechart']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(costChart);

但我不太确定 where/how 将这些包含在函数中。它们会放在脚本的顶部，还是在调用 costChart() 的函数内，还是在 costChart() 函数本身内，等等...？

Answer 1

您通常希望在调用 Google JSAPI 后立即加载 corechart 组件，因此这种方式每次加载页面时只加载一次 - 如果您将它放在绘制您的函数中图表，您将在每次绘制函数时重新加载该文件。

你也可以在直接调用JSAPI文件的时候加载corechart组件，不过我觉得单独做更易读：

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['corechart']}]}"></script>

我已经在 JSFiddle 中重新创建了您的代码，因此您可以看到我在哪里加载了 corechart 组件：

https://jsfiddle.net/hob53xux/

Google chart object error: google not defined

Google chart object error: google not defined

javascript

charts

object