Google Intellij 上未加载图表
Google Charts Not Loading on Intellij
我正在尝试用 Google 图表制作饼图。当我将此代码放入 html 文件并 运行 它自己工作正常时。
这是它的样子:
但是,当我 运行 它在我的 Intellij 项目中时,什么也没有出现。
这是我的代码:
<div>
<!--Load the AJAX API-->
<!--script type="text/javascript" src="views/jsapi.js"></script-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
console.log("1");
// Load the Visualization API and the piechart package.
google.load('visualization', '1.1', {'packages':['corechart']});
console.log("2");
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
console.log("3");
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
console.log("4");
// 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]
]);
console.log("5");
// 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);
console.log("6");
}
console.log("7");
</script>
<!--Div that will hold the pie chart-->
<div id="content">
<div id="chart_div"></div>
</div>
</div>
为什么会这样?
我通过修改这行代码让它工作:
google.load('visualization', '1', {packages: ['corechart']});
为此:
google.load('visualization', '1', {packages: ['corechart'], callback : drawChart});
在这里查看 Zanona 的回答以获得进一步的解释:google.load causes empty dom/screen
我正在尝试用 Google 图表制作饼图。当我将此代码放入 html 文件并 运行 它自己工作正常时。
这是它的样子:
但是,当我 运行 它在我的 Intellij 项目中时,什么也没有出现。
这是我的代码:
<div>
<!--Load the AJAX API-->
<!--script type="text/javascript" src="views/jsapi.js"></script-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
console.log("1");
// Load the Visualization API and the piechart package.
google.load('visualization', '1.1', {'packages':['corechart']});
console.log("2");
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
console.log("3");
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
console.log("4");
// 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]
]);
console.log("5");
// 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);
console.log("6");
}
console.log("7");
</script>
<!--Div that will hold the pie chart-->
<div id="content">
<div id="chart_div"></div>
</div>
</div>
为什么会这样?
我通过修改这行代码让它工作:
google.load('visualization', '1', {packages: ['corechart']});
为此:
google.load('visualization', '1', {packages: ['corechart'], callback : drawChart});
在这里查看 Zanona 的回答以获得进一步的解释:google.load causes empty dom/screen