首页 > 解决方案 > 单击表格中的行时出现新的 Google 图表错误。Uncaught TypeError: b.split is not a function -- 已经工作了好几年

问题描述

我们有多个已成功使用多年的 Google 可视化表。然而,在过去的一周里,我们开始在其中许多人身上看到这个错误

未捕获的类型错误:b.split 不是函数

我们正在尝试做的是单击表格中的一行,以允许我们根据该行中的内容超链接到另一个页面。正如我所说,它已经工作了几年。我确切地知道它在哪里中断。正是这一行触发了错误:

var row = table.getSelection()[0].row;

我知道是这一行,因为如果我硬编码 ROW 的值,超链接会按预期工作。

对于未更改的代码可能导致此错误的任何建议?

这是代码:

        <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>


    <script type="text/javascript">

    google.load("visualization", "1.1", {packages:["table"]});
    google.setOnLoadCallback(drawVisualization);

    function drawVisualization() {

                    var d = new google.visualization.arrayToDataTable([$tableReportResults]);

                    var table = new google.visualization.Table(document.getElementById('table_report_results'));

                    var view = new google.visualization.DataView(d);
                            
                    var cssClassNames = {'hoverTableRow': 'hover-table-row', headerCell: 'googleHeaderCell'};
                    var colIndex = 0;
                    var  last_row = d.getNumberOfRows() -1;
                    var ts =  $( "#dropdown_1_dropdown option:selected" ).val();

                    var syear =  $( "#dropdown_2_dropdown option:selected" ).text();
                    syear = encodeURIComponent(syear);
                    google.visualization.events.addListener(table, 'ready', function () {
                        $('.google-visualization-table-table').find('td').each(function() {
                            $(this).mouseover(function(){
                                    colIndex = $(this).index();
                                    var row = $(this).parent().index() - 1; // subtract 1 for the table header
                                    //console.log(row, colIndex);
                             });
                        });
                    });

                        google.visualization.events.addListener(table, 'select', function() {           

                            $('.google-visualization-table-table').find('td').each(function() {
                                $(this).mouseover(function(){
                                        colIndex = $(this).index();
                                        row = $(this).parent().index() - 1; // subtract 1 for the table header
                                        console.log('mouseover = ' + colIndex + ' , ' + row);
                                        }); 
                                });
                                
                        var row = table.getSelection()[0].row;

标签: javascriptgoogle-visualization

解决方案


我使用谷歌图表的早期版本 49 解决了我的问题。

 <script>
      google.charts.load('49', 
        {packages: ['corechart']});
    </script>

或者:

<script type="text/javascript">
    {literal}google.charts.load('49', {packages: ['corechart', 'geochart', 'timeline', 'gantt', 'treemap']});{/literal}
</script>

如果您使用实际版本,您应该根据以下信息更改您的代码:

https://groups.google.com/g/google-visualization-api/c/G4Keck3KVwU


推荐阅读