谷歌图表对象错误:谷歌未定义

Question

我已经测试了一些基于任意数据为Google charts对象创建图表的独立代码，但是在将这些代码合并到创建实际数据的对象中时遇到了障碍。我试图调用以下图表函数，但得到一个"谷歌未定义的错误:

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未定义"的错误。我试过将脚本添加到部分，但它仍然没有。我已经尝试通过将对象作为参数传递给它来单独调用函数，但仍然是相同的错误。我有一种感觉，这可能是由于我应该包括的方式:

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

，但我不太确定在哪里/如何在函数中包含这些。它们是在脚本的顶部，还是在调用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/