我在我的代码点火器应用程序中使用谷歌图表(饼图)。我在仪表板视图页面上显示图表，并且得到了正确的结果。但是当我检查我的其他页面时，我遇到了一个错误
未捕获(承诺中)错误：未定义容器。
错误：
未捕获(承诺中)错误：未定义容器
在gvjs_3m (jsapi_compiled_default_module.js：66)
at gvjs_9K.gvjs_7p [作为构造函数] (jsapi_compiled_default_module.js：232)
at gvjs_9K.gvjs_8K [作为构造函数] (jsapi_compiled_ui_module.js：979)
在新gvjs_9K (jsapi_compiled_ui_module.js：1010)
在绘图图表 (房东地址：648)
在房东地址：623
在
我的图表代码：
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: "<?php echo base_url().'Dashboard/chartData'; ?>",
dataType: "JSON",
success:function(result){
google.charts.load('current',{
'packages':['corechart']
});
google.charts.setOnLoadCallback(function(){
drawChart(result);
});
//alert(result);
}
});
function drawChart(result) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'defects');
var dataArray = [];
$.each(result, function(i, obj) {
dataArray.push([obj.name, parseInt(obj.defects)]);
});
data.addRows(dataArray);
var piechart_options = {
title : 'Defects Registered',
width : 500,
height: 300,
is3D: true,
};
var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
piechart.draw(data, piechart_options);
}
});
</script>
网页代码：
<div class="box-body">
<table class="columns">
<tr>
<td>
<div class="col-md-6" id="piechart_div"></div>
</td>
<td>
<div class="col-md-6" id="donutchart_div"></div>
</td>
</tr>
</table>
</div>
我很困惑为什么我在其他页面上收到该错误而不是在仪表板上收到错误？
欢迎任何形式的帮助，提前感谢。
虽然这可能无法解决您的问题，
但默认情况下，您实际上可以使用google.charts.load而不是-->$(document).ready，google.charts.load
会等到文档准备就绪
推荐一些不同的设置...
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
packages:['corechart']
}).then(function () {
$.ajax({
url: "<?php echo base_url().'Dashboard/chartData'; ?>",
dataType: "JSON",
success:function(result){
drawChart(result);
}
});
function drawChart(result) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'defects');
var dataArray = [];
$.each(result, function(i, obj) {
dataArray.push([obj.name, parseInt(obj.defects)]);
});
data.addRows(dataArray);
var piechart_options = {
title : 'Defects Registered',
width : 500,
height: 300,
is3D: true,
};
var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
piechart.draw(data, piechart_options);
}
});
</script>
但是您需要检查所有抛出错误的页面，
是否具有绘制图表时使用的 id 的div元素......
// check for div with proper id
var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
在error回调中替换硬编码数据，
你发布的代码工作正常......
请参阅以下工作片段
google.charts.load('current', {
packages:['corechart']
}).then(function () {
$.ajax({
url: "<?php echo base_url().'Dashboard/chartData'; ?>",
dataType: "JSON",
success: function(result){
drawChart(result);
},
error: function () {
var result = [
{name: 'defect 1', defects: '1'},
{name: 'defect 2', defects: '2'},
{name: 'defect 3', defects: '3'},
{name: 'defect 4', defects: '4'},
{name: 'defect 5', defects: '5'}
];
drawChart(result);
}
});
function drawChart(result) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'defects');
var dataArray = [];
$.each(result, function(i, obj) {
dataArray.push([obj.name, parseInt(obj.defects)]);
});
data.addRows(dataArray);
var piechart_options = {
title : 'Defects Registered',
width : 500,
height: 300,
is3D: true,
};
var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
piechart.draw(data, piechart_options);
}
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="box-body">
<table class="columns">
<tr>
<td>
<div class="col-md-6" id="piechart_div"></div>
</td>
<td>
<div class="col-md-6" id="donutchart_div"></div>
</td>
</tr>
</table>
</div>