javascript 未捕获的错误：未定义容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19615750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught Error: Container is not defined
提问by Arun Kumar
I'm trying to generate a gantt chart using Google charts and after coding accordingly with the existing php code, I m getting a blank html. Please help me on this to display the chart successfully.
我正在尝试使用 Google 图表生成甘特图，在使用现有的 php 代码进行相应编码后，我得到了一个空白的 html。请帮助我成功显示图表。
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the gantt chart package.
google.load("visualization", "1", {packages: ["timeline"]});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: "http://localhost:8080/index1.php",
dataType:"json",
async: false ,
success: function(data) {
jsonData = data;
}
});
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 200px;></div>
</body>
</html>
回答by gil meyerstein
You are missing : " on the div style
您缺少：“关于 div 样式
<div id="chart_div" style="width: 900px; height: 200px;></div>
The divis not defined, so the JS cant find it.
在div没有定义的，所以JS不能找到它。
The getElementByIdfailed.
的getElementById失败。
回答by Raghvendra Parashar
I think you are having dataformat issue, try this
我认为你有data格式问题，试试这个
/*
// assuming you are having data object in this format, with columns (first : string, second: integer)
data = [
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]
*/
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function get_gchart_data(data) {
var g_data = new google.visualization.DataTable();
g_data.addColumn('string', 'Topping');
g_data.addColumn('number', 'Slices');
g_data.addRows(data);
return g_data;
}
function drawChart() {
$.ajax({
url: "localhost:8080/index1.php",
dataType:"json",
async: false ,
success: function(data) {
var g_data = get_gchart_data(data);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(g_data, {width: 500, height: 240});
}
})
};
回答by TKumar Stpl
Try this, I think you are accessing jsonDataon wrong place.
试试这个，我认为你jsonData在错误的地方访问。
<script type="text/javascript">
$(function() {
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: "localhost:8080/index1.php",
dataType:"json",
async: false ,
success: function(data) {
jsonData = data;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, {width: 500, height: 240});
}
})
};
});
</script>
