流星中的谷歌图表(google charts in meteor)

我想将谷歌图表api添加到我的应用程序中，我已经在头标记中附加了脚本标记，如下所示，然后将div标记添加到我的根模板，如下所示

按钮点击事件我添加了图表代码，如本页所示

这是代码

google.load('visualization', '1.0', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { // Create the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Set chart options var options = {'title':'How Much Pizza I Ate Last Night', 'width':400, 'height':300}; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); }

我收到以下错误

google is not defined

编辑：当我在外面添加脚本标签并说明html页面时，它会添加到dom中，当我点击按钮时，整个dom都会覆盖并且没有显示任何内容

任何帮助表示感谢，谢谢

I want to add google charts api to my application, I have attched the script tag in header tag like below and then added div tag to my root template like below

And on button click event i added the chart code as shown in this page

here is the code

google.load('visualization', '1.0', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { // Create the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Set chart options var options = {'title':'How Much Pizza I Ate Last Night', 'width':400, 'height':300}; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); }

I'm getting the following error

google is not defined

EDIT: When i add the script tag outside and stating of the html page, it is adding to the dom and when i click on button whole dom is over-writing and nothing is shown up

Any help appreciated, Thanks

最满意答案

我不完全清楚这段代码的上下文，但听起来你有一个我以前遇到过的加载问题。如果您使用google.load调用内联设置回调，则可能会为您解决此问题。替换这些行：

google.load('visualization', '1.0', {'packages':['corechart']}); google.setOnLoadCallback(drawChart);

有了这个：

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

I'm not entirely clear on the context of this code, but it sounds like you have a loading issue that I've run across before. If you set the callback inline with the google.load call, it may fix this for you. Replace these lines:

google.load('visualization', '1.0', {'packages':['corechart']}); google.setOnLoadCallback(drawChart);

with this:

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

更多推荐