javascript - 未捕获的类型错误 : Cannot read property 'row' of undefined - google visualisation api

Question

我有这段代码 google visualization API:

var slider;
    var ajdi = '';
      function drawVisualization() {

       var cssClassNames = {
        'headerRow': 'zaglavlje',
        'tableRow': 'red',
        'oddTableRow': 'red1',
        'selectedTableRow': 'orange-background large-font',
        'hoverTableRow': 'prekoreda',
        'headerCell': 'gold-border',
        'tableCell': 'cell',
        'rowNumberCell': 'underline-blue-font'
    };

       var json = $.ajax({
                    url: 'getzadaci.php', // make this url point to the data file
                    dataType: 'json',
                    async: false
                }).responseText;

                // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(json);
        //dodajemo kolonu sa kontrolama

        // Define a category picker control for the Gender column
        var categoryPicker = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'control1',
          'options': {
            'filterColumnLabel': 'Status',
            'ui': {
            'labelStacking': 'vertical',
              'allowTyping': false,
              'allowMultiple': true,
                          'caption': 'Status'

            }
          }
        });

         var categoryPicker1 = new google.visualization.ControlWrapper({
         'controlType': 'CategoryFilter',
          'containerId': 'control2',
          'options': {
            'filterColumnIndex': 8,
            'ui': {
            'labelStacking': 'horizontal',
              'allowTyping': false,
              'allowMultiple': true,
              'caption': 'Parcela'
            }
          }
        });
         var categoryPicker2 = new google.visualization.ControlWrapper({
         'controlType': 'CategoryFilter',
          'containerId': 'control4',
          'options': {
            'filterColumnIndex': 2,
            'ui': {
            'labelStacking': 'horizontal',
              'allowTyping': false,
              'allowMultiple': true,
              'caption': 'Vrsta zadatka'
            }
          }
        });


        var stringFilter1 = new google.visualization.ControlWrapper({
          'controlType': 'StringFilter',
          'containerId': 'control3',
          'options': {
                      'matchType': 'any',
          'filterColumnIndex': 1,
          'ui': {'labelStacking': 'vertical'}
          }
        });

        var slider = new google.visualization.ControlWrapper({
          'controlType': 'DateRangeFilter',
          'containerId': 'control5',
          'options': {
            'filterColumnLabel': 'Pocetak',
         'ui': {'labelStacking': 'vertical'}
          }
        });

        // Define a Pie chart

        // Define a table
        var table = new google.visualization.ChartWrapper({
          'chartType': 'Table',
          'containerId': 'chart2',
          'cssClassNames': 'cssClassNames',
          'view': { 'columns': [1,2,12,5,6,8,11] },
          'options': {
        cssClassNames: cssClassNames,
        allowHtml: true
    }
        });

       var timeline = new google.visualization.ChartWrapper({
    chartType: 'Timeline',
    containerId: 'chart5',
    options: {
    height: '350',
    timeline: { colorByRowLabel: true, 
                backgroundColor: '#ffd' },
    //timeline.barLabelStyle: {color: '#000', fontName: 'Arial', fontSize: '13px'},
    //backgroundColor: '#fff',
    colors: ['#55c2a2', '#89d168', '#d3eb87','#8ec63e', '#FFF0BA','#FF542E', '#CFD6DE', '#ADC1D6', '#7297BA']
    //timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' },
               // barLabelStyle: { fontName: 'Garamond', fontSize: 14 } }
    },
    view: {
        // as an example, use columns "Naziv", "Vrsta", "Pocetak", and "Zavrsetak" for the timeline
        columns: [8, 2, 5, 6]
    },

});

           var formatter_short = new google.visualization.DateFormat({formatType: 'short'});
           formatter_short.format(data, 5);
           formatter_short.format(data, 6);


        new google.visualization.events.addListener(table, 'ready', function () {
        google.visualization.events.addListener(table.getChart(), 'select', function () {
            var selection = table.getChart().getSelection();
            // iterate over all selected rows
            for (var i = 0; i < selection.length; i++) {
                $('#klikberba, #klikdjubrenje, #klikhemija,#kliksadnja').hide();
                $('#sliderdj, #sliderh').slider({
precision: 2,
    value: 8.115,
    max:115,
    formater: function(value) {
        return value+ ' m2';
    }
});

}
              //$("#edit").removeClass("edit btn btn-success")
              //$('#edit').addClass('edit btn btn-success');
              ajdi = table.getDataTable().getValue(selection[i].row,0);
              $("#vrednostid").val(table.getDataTable().getValue(selection[i].row,0));
              $("#naziv1").val(table.getDataTable().getValue(selection[i].row,1));
              $("#vrsta_rada1").val(table.getDataTable().getValue(selection[i].row,2));
              $("#status1").val(table.getDataTable().getValue(selection[i].row,3));
              $("#opis1").val(table.getDataTable().getValue(selection[i].row,4));
              $("#usluzno1").val(table.getDataTable().getValue(selection[i].row,9));

              var p = new Date(table.getDataTable().getValue(selection[i].row,5));
              $("#dp31").datepicker("setDate", p);

              var z = new Date(table.getDataTable().getValue(selection[i].row,6));
              $("#dp41").datepicker("setDate", z);

              //$("#parcele1").val(table.getDataTable().getValue(selection[i].row,8));
              //$("#parcele1").select2("val", ["3","19"]);
              var id = table.getDataTable().getValue(selection[i].row,10);
              var naziv = table.getDataTable().getValue(selection[i].row,8);
              $("#parcele1").select2("data", {id: id, naziv: naziv});
              var vrstaRad = table.getDataTable().getValue(selection[i].row,2);
              $("#vrsta_rada1").select2("data", {text: vrstaRad});
                if (vrstaRad == 'djubrenje') {
    $('#klikdjubrenje').show();
} else if (vrstaRad == 'zastita') {
    $('#klikhemija').show();
} else if (vrstaRad == 'setva/zasad') {
    $('#kliksadnja').show();
    } else if (vrstaRad == 'berba/zetva') {
    $('#klikberba').show();
    } else {
    greeting = "to je to";
}


      });
    });

        // Create a dashboard
       new google.visualization.Dashboard(document.getElementById('dashboard')).
            // Establish bindings, declaring the both the slider and the category
            // picker will drive both charts.


    bind([categoryPicker, categoryPicker1, categoryPicker2, slider, stringFilter1], [table, timeline]).
            // Draw the entire dashboard.
            draw(data, {'allowHtml':true, 'cssClassNames': 'cssClassNames'});      }
      //table.draw(data, {'allowHtml':true, 'cssClassNames': cssClassNames});      }

function dashboardReady() {
        // The dashboard is ready to accept interaction. Configure the buttons to
        // programmatically affect the dashboard when clicked.

        // Change the slider selected range when clicked.
        document.getElementById('rangeButton').onclick = function() {
          slider.setState({'lowValue': 2, 'highValue': 5});
          slider.draw();
        };

        // Change the pie chart rendering options when clicked.
        document.getElementById('optionsButton').onclick = function() {
          piechart.setOption('is3D', true);
          piechart.draw();
        };
      }

      google.setOnLoadCallback(drawVisualization);// JavaScript Document

昨天我认为一切正常。今天我收到这个错误:

Uncaught TypeError: Cannot read property 'row' of undefined on line 156.

我该如何解决这个问题？这是 google viz API 错误还是我在某处有语法错误？

Answer 1

我猜你的代码在这里失败了:

ajdi = table.getDataTable().getValue(selection[i].row,0);

看起来你已经在这一行之前关闭了 for 循环，所以你的 selection[i] 将是未定义的

尝试将出现在该行之前的括号 移动到 selection[i] 代码块之后

提示 - 尽量保持代码的良好格式，以便您可以轻松地看到 if 和 for 的开始和结束位置 - http://jsfiddle.net/6JLfX/1/