Question

我正在使用Google直方图。它适用于某些数据集但不适用于其他数据集。并且它会引发错误＆＃34;表没有行＆＃34;即使我的输入是正确的。这里我正在阅读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列时。我对谷歌直方图的输入是

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"]];

执行此操作时，会引发一个错误，即＆＃34;表没有行＆＃34; 。请查看我的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>

＆＃34;表没有行＆＃34; Google图表直方图中的错误

1 个答案: