谷歌图表。未捕获类型错误：google.loader.writeLoadTag不是一个函数。

Question

突然间，谷歌图表不再工作，但我没有改变任何代码。

我在chrome中得到这个错误。

jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}:54 Uncaught TypeError: google.loader.writeLoadTag is not a function

Uncaught TypeError: google.visualization.DataTable is not a constructor
    at draw_stats (raven.js:3121)
    at show_stats (raven.js:3121)
    at HTMLDocument.<anonymous> (home.html:1279)
    at j (raven.js:3121)
    at Object.fireWith [as resolveWith] (raven.js:3121)
    at Function.ready (raven.js:3121)
    at HTMLDocument.J (raven.js:3121)

我加载谷歌图表这样的（因为像永远没有问题）。

<!-- google charts api -->
<script src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>

而图表本身是一个有点长的代码，混合了PHP和ajax（但它的工作原理：））。

function draw_stats(trainer_name) {

    // get data from input field
    var chart_data = $('#chart_data_' + trainer_name).val();

    chart_data = chart_data.replace(/'/g, '"');

    if (chart_data > '' && google != undefined && google > '')  {

        $("#loadingSpinner").prependTo(".home_stats_graph").show();
        $('.home_stats_container').show();
        var data = new google.visualization.DataTable();
        // get norm value
        var norm_data;
        $.ajax({
            url: "inc/run.php",
            data: {
                typ: "norm_val",
                tname: trainer_name
            },
            type: "GET",
            context: document.body,
            success: function(norm_data) {
                norm_data = parseFloat(norm_data);
                if (isNaN(norm_data)) {
                    norm_data = 0;
                }
                data.addColumn('date', '');
                data.addColumn('number', $('#trans_reaktionszeit').val());
                data.addColumn({
                    type: 'string',
                    role: 'style'
                });
                data.addColumn({
                    type: 'number',
                    role: 'annotation'
                });
                data.addColumn({
                    type: 'string',
                    role: 'tooltip',
                    'p': {
                        'html': true
                    }
                });
                data.addColumn('number', $('#trans_vergleichsdaten').val());
                chart_data = $.parseJSON(chart_data);
                $.each(chart_data, function(i, item) {
                    var date = new Date(item[0] * 1000);
                    item = new Array(date, item[1], 'point {size: ' + item[4] + '}', item[1], item[5], norm_data);
                    data.addRow(item);
                });
                var chart_color = $('html').css('background-color');
                if (chart_color != 'rgb(38, 34, 40)') {
                    var chart_font_color = '#000000';
                    var chart_line_color = 'black';
                } else {
                    var chart_font_color = '#ffffff';
                    var chart_line_color = 'yellow';
                }
                $('#blue_legend').css('background', chart_line_color);
                var font_fam = '<?=$gui->mainFont;?>';
                var options = {
                    series: {
                        1: {
                            visibleInLegend: false
                        }
                    },
                    colors: [chart_line_color, 'transparent'],
                    lineWidth: 0,
                    pointSize: 5,
                    width: '100%',
                    'chartArea': {
                        'top': '10',
                        'width': '85%',
                        'height': '85%'
                    },
                    vAxis: {
                        minValue: 0,
                        viewWindow: {
                            min: 0
                        },
                        textStyle: {
                            color: chart_font_color,
                            fontName: font_fam
                        },
                        title: $('#trans_reaktionszeit').val(),
                        titleTextStyle: {
                            color: chart_font_color,
                            fontName: font_fam
                        }
                    },
                    hAxis: {
                        format: $('#gg_haxis_format').val(),
                        textStyle: {
                            color: chart_font_color,
                            fontName: font_fam
                        }
                    },
                    legend: {
                        position: 'none',
                        textStyle: {
                            color: chart_font_color,
                            fontName: font_fam
                        }
                    },
                    displayAnnotations: true,
                    displayTooltips: true,
                    titleTextStyle: {
                        color: chart_font_color, // any HTML string color ('red', '#cc00cc')
                        fontName: font_fam, // i.e. 'Times New Roman'
                        fontSize: 22, // 12, 18 whatever you want (don't specify px)
                    },
                    backgroundColor: chart_color,
                    curveType: "function",
                    tooltip: {
                        textStyle: {
                            fontName: font_fam
                        },
                        isHtml: true
                    },

                };
                var chart = new google.visualization.ScatterChart(document.getElementById("popup_stats_container_" + trainer_name));


                chart.draw(data, options);
                $("#loadingSpinner").hide();
            }
        });
    }
}

这个问题被许多用户报告... ... 在firefox上也发生了。

更多错误细节可以在sentry上找到。https:/sentry.ioshareissue87b5b61669e04ea0b097951c53d46520。

Answer 1

长久以来被废弃的jsapi加载器现在被重定向到新的加载器www.gstatic.comchartsloader.js，其中包括对autoload参数的支持，尽管如果你打算继续使用这个参数，你将不得不使用encodeURI()和JSON.stringify()对你的autoload结构进行正确的编码。

const autoloadParam = encodeURI(JSON.stringify(autoloadStruct));

然而，这里报告的问题涉及到了其他的东西。 一些使用Google Charts的地方似乎内置了对jsapi加载器的一些内部变量和函数的依赖，特别是google.loader.writeLoadTag。 我们不太可能在新的加载器中支持google.loader.writeLoadTag。

最好的办法可能是转换使用新的加载器，这在文档中已有说明 此处. 取代自动加载参数，只需添加对google.charts.load()和google.charts.setOnLoadCallback()的调用。