我想将谷歌图表api添加到我的应用程序中,我已经在头标记中附加了脚本标记,如下所示,然后将div标记添加到我的根模板,如下所示
<template name="home"> <head> <title>sss</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> </head> <body> <button type="button" id="getData">Get Data</button> <div id="chart_div"></div> </body> </template>按钮点击事件我添加了图表代码,如本页所示
这是代码
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
<template name="home"> <head> <title>sss</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> </head> <body> <button type="button" id="getData">Get Data</button> <div id="chart_div"></div> </body> </template>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 definedEDIT: 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});更多推荐
发布评论