谷歌可视化错误:容器为空.消息:一个或多个参与者未能提取()
google-visualization-errors: container is null. message: One or more participants failed to draw()
我正试图在我的web应用程序中使用谷歌仪表板,但我收到了以下错误。
谷歌可视化错误:容器为空。消息:一个或多个参与者未能提取()
我的代码与谷歌文档代码所建议的类似,但我仍然面临错误。
我的JS(通过C#生成)-
<script type='text/javascript'>
google.charts.load('current', {
'packages': ['corechart', 'controls']});
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = google.visualization.arrayToDataTable([
['Status', 'Count'],
['Closed', 671],
['Resolved', 5],
['Test', 3]
]); //test///
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Count'
}
});
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'divIncidentStatus',
'options': {
'width': 300,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
}
});
dashboard.bind(slider, pieChart);
dashboard.draw(data);
}
</script>
HTML
<div class="panel panel-default">
<div class="panel-body">
<div class="dashboard_div">
<div class="filter_div"></div>
<div id="divIncidentStatus"></div>
</div>
</div>
</div>
p.S-我试过在HTML DIV之前和之后调用JS代码,但没有任何帮助。
看起来像是一个拼写错误
需要设置id
属性,而不是class
在dashboard_div
和filter_div
上
而不是。。。
<div class="dashboard_div">
<div class="filter_div"></div>
<div id="divIncidentStatus"></div>
</div>
更改为…
<div id="dashboard_div">
<div id="filter_div"></div>
<div id="divIncidentStatus"></div>
</div>
请参阅以下工作片段。。。
google.charts.load('current', {
'callback': function () {
var data = google.visualization.arrayToDataTable([
['Status', 'Count'],
['Closed', 671],
['Resolved', 5],
['Test', 3]
]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Count'
}
});
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'divIncidentStatus',
'options': {
'width': 300,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
}
});
dashboard.bind(slider, pieChart);
dashboard.draw(data);
},
'packages': ['corechart', 'controls']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<div id="dashboard_div">
<div id="filter_div"></div>
<div id="divIncidentStatus"></div>
</div>
</div>
</div>
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- jQuery:循环一个具有不同超时值的循环
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 从javascript创建一个列表
- 节点导出返回一个空对象
- 使用clickToggle并在单击另一个元素时关闭元素
- 我可以在json对象中添加一个函数吗
- 使用javascript将动态表从一个html页面打印到另一个html页
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- 表追加而不附加最后一个元素
- 我如何找到一个句子中的所有空格并替换忽略它们
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 使用类从一个标记中双击事件
- Javascript,访问一个主要对象模块模式中的每个对象
- 如果使用 lodash 将属性存在于另一个对象中,则向对象添加属性
- 如何在elfinder插件(一个文件管理器插件)上获得上传前事件
- 我应该如何从xml文件构建一个javascript页面
- 图表API错误——[一个或多个参与者未能绘制()]
- 谷歌可视化错误:容器为空.消息:一个或多个参与者未能提取()