谷歌图表直方图中的“表没有行”错误

Question

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

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

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 列时。我对 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，支持以下格式：

数据格式

有两种方法可以填充直方图数据表。当有 只有一个系列：

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

...当有多个系列时：

 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>