无效的数据表格式：谷歌条形图上必须至少有 2 列

Question

此图表显示来自数据库的信息。如果没有从数据库中检索到结果，如何显示更用户友好的消息或根本不绘制图表？我已经尝试放置代码行以在长度检查内绘制图表，但仍然显示错误消息。

  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);

        });

    }

Answer 1

您可以在绘制图表之前检查数据表中的行数。如果没有数据，则在图表的容器中显示一条消息。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...';}