php - 无效的数据表格式:谷歌条形图上必须至少有 2 列
问题描述
此图表显示来自数据库的信息。如果没有从数据库中检索到结果,如何显示更用户友好的消息或根本不绘制图表?我已经尝试放置代码行以在长度检查内绘制图表,但仍然显示错误消息。
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.getJSON('includes/get_info_bar_chart.php', function(jsonData){
var gglData = [];
if(jsonData.length > 0) {
// load column headings
var colHead = [];
Object.keys(jsonData[0]).forEach(function (key) {
colHead.push(key);
});
gglData.push(colHead);
// load data rows
jsonData.forEach(function (row) {
var gglRow = [];
Object.keys(row).forEach(function (key) {
gglRow.push(row[key]);
});
gglData.push(gglRow);
});
}
var data = google.visualization.arrayToDataTable(gglData);
var chart = new google.charts.Bar(document.getElementById('d_bar'));
chart.draw(data);
});
}
解决方案
您可以在绘制图表之前检查数据表中的行数。
如果没有数据,则在图表的容器中显示一条消息。
var container = document.getElementById('d_bar');
var data = google.visualization.arrayToDataTable(gglData);
if (data.getNumberOfRows() > 0) {
var chart = new google.charts.Bar(container);
chart.draw(data);
} else {
container.innerHTML = 'No data found, nothing to see here...';
}
推荐阅读
- jenkins - 如何从脚本转换为声明式管道
- c# - 为什么 Finder Sync 扩展在调试配置中工作而不是在发布配置中工作?
- flutter - 如何将 LinearProgressIndicator 添加到 AlertDialog 的顶部
- nginx - 在 GKE 上的 nginx-ingress 中禁用 TLS 1.0 和 TLS 1.1
- python - BeautifulSoup 如何从站点(电晕)中提取数据?
- python - 在 for 循环中重命名读取的数据
- javascript - ReactJS:如何在 Tree View Node Material UI 中扩展和显示 API 调用?
- c++ - C++ 类型提升低于 int
- hexo - Hexo 注入 html
- jenkins - 我正在尝试使用 ZAP 集成在 jenkins 中创建一个自由式项目