"Table has no rows" Google 图表直方图中的错误

Question

我正在使用 Google 直方图。它适用于某些数据集但不适用于其他数据集。即使我的输入是正确的，它也会引发错误 "Table has no rows"。在这里，我正在按列阅读 csv 文件并传递到可视化页面。

例如：我正在阅读此处的 2 个 csv 列并传递到可视化页面。这里我对 Google 直方图的输入是

var inputdata1 = [["val","d"],["val","2"],["val","2"],["val","1"],["val","2"],["val","2"],["val","1"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","1"],["val","2"]];

这个工作正常并为我提供了直方图。

当我传递其他 2 columns.Here 时，我对 Google 直方图的输入是

var inputdata2 =  [["val","b"],["val","3"],["val","3"],["val","3"],["val","5"],["val","1"],["val","12"],["val","7"],["val","11"],["val","1"],["val","7"],["val","6"],["val","16"],["val","11"],["val","21"],["val","12"],["val","1"],["val","22"],["val","16"],["val","1"],["val","21"],["val","11"],["val","6"],["val","11"],["val","15"],["val","12"],["val","12"]];

执行此操作时，会引发 "Table has no rows" 错误。请检查我的 fiddle.

如有任何帮助，我们将不胜感激。

提前致谢。

Answer 1

事实上 inputdata1 和 inputdata2 都不包含 JSON 数据 直方图 .

支持的数据

根据 the documentation 支持以下格式：

Data Format

There are two ways to populate a histogram datatable. When there's only one series:

 var data = google.visualization.arrayToDataTable([
    ['Name', 'Number'],
    ['Name 1', number1],
    ['Name 2', number2],
    ['Name 3', number3],
    ...
  ]);

...and when there are multiple series:

 var data = google.visualization.arrayToDataTable([
    ['Series Name 1', 'Series Name 2', 'Series Name 3', ...],
    [series1_number1, series2_number1, series3_number1, ...],
    [series1_number2, series2_number2, series3_number2, ...],
    [series1_number3, series2_number3, series3_number3, ...],
    ...
  ]);

话虽如此，您可能希望将第二列转换为数字格式：

var inputJson = [["val","b"],["val","3"],["val","3"],["val","3"],["val","5"],["val","1"],["val","12"],["val","7"],["val","11"],["val","1"],["val","7"],["val","6"],["val","16"],["val","11"],["val","21"],["val","12"],["val","1"],["val","22"],["val","16"],["val","1"],["val","21"],["val","11"],["val","6"],["val","11"],["val","15"],["val","12"],["val","12"]];
var chartJson = inputJson.map(function(item,i){
    if(i == 0)
       return item;
    else {
       return [item[0],parseInt(item[1])];
    }       
});

var data = google.visualization.arrayToDataTable(chartJson);

转换数据后，图表将正确呈现。

工作示例

google.load('visualization', '1.1', {
    'packages': ['corechart']
});
google.setOnLoadCallback(drawStuff);

function drawStuff() {
    
  

    var inputJson = [["val","b"],["val","3"],["val","3"],["val","3"],["val","5"],["val","1"],["val","12"],["val","7"],["val","11"],["val","1"],["val","7"],["val","6"],["val","16"],["val","11"],["val","21"],["val","12"],["val","1"],["val","22"],["val","16"],["val","1"],["val","21"],["val","11"],["val","6"],["val","11"],["val","15"],["val","12"],["val","12"]];
    var chartJson = inputJson.map(function(item,i){
        if(i == 0)
           return item;
        else {
           return [item[0],parseInt(item[1])];
        }       
    });
       
    var data = google.visualization.arrayToDataTable(chartJson);
    


    //The below input data works fine. 
    //var data = google.visualization.arrayToDataTable([["val","d"],["val","2"],["val","2"],["val","1"],["val","2"],["val","2"],["val","1"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","2"],["val","1"],["val","2"]]);

    // Set chart options
    var options = {
        width: 400,
        height: 300,
        histogram: {
            bucketSize: 0.1
        }
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
    chart.draw(data, options);
};

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="chart.js"></script>
<div id="chart_div"></div>

"Table has no rows" Google 图表直方图中的错误

"Table has no rows" Error in Google Charts Histogram

google-visualization

histogram