Question

我已经测试了一些基于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函数的第三行看到这个注释）

我似乎无法摆脱未定义的谷歌＆＃39;错误。我已经尝试将脚本添加到该部分，但它仍然是nogo。我试过通过将对象作为arg传递给它来单独调用该函数，但仍然是同样的错误。我有一种感觉，这可能是由于我应该包括的方式：

  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之后加载核心图表组件，因此每次加载时它只会加载一次 - 如果您将其放在绘制图表的函数中，那么＆＃ 39;每次绘制函数时都会重新加载该文件。

您也可以直接调用JSAPI文件时加载核心图组件，虽然我发现它更易于单独执行：

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

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

https://jsfiddle.net/hob53xux/

Google图表对象错误：Google未定义

1 个答案: