Google Chart IE9问题(未定义)

Google Chart IE9 Issue (undefined)

本文关键字:未定义 问题 Chart IE9 Google      更新时间:2023-09-26

我正在开发一些跨所有支持的浏览器使用的图表,我只在IE9中得到一个错误。控制台显示:gvjs_wa未定义,gvjs_t未定义或gvjs_uz未定义。

谢谢!

<HTML>
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    function drawGLine() {
        var bin =JSON.parse('[0.65, 0.78, 1.16, 1.68, 2.0, 2.56, 3.03, 3.65, 4.51, 5.16, 6.0, 6.58, 7.47, 8.57, 9.58, 10.38, 11.28, 12.25, 13.03, 13.78, 14.8, 15.69, 16.49, 17.33, 18.06, 18.96, 20.49, 21.85, 22.94, 24.14, 25.31, 26.27, 27.22, 28.12, 29.87, 31.56, 32.58, 33.67, 35.14, 37.33, 38.41, 40.02, 41.87, 43.31, 44.98, 46.03, 47.84, 49.1, 50.81, 52.38, 54.17, 55.37, 57.3, 59.13, 61.14, 63.39, 64.43, 65.92, 67.53, 69.04, 70.82, 72.07, 73.17, 74.9, 76.63, 78.16, 79.2, 80.33, 81.09, 82.36, 83.34, 84.35, 85.27, 86.48, 87.58, 88.37, 89.25, 89.89, 90.68, 91.24, 92.2, 92.83, 93.87, 94.82, 95.38, 95.94, 96.58, 97.21, 97.45, 97.85, 98.25, 98.57, 98.81, 98.81, 99.28, 99.44, 99.44, 99.6, 99.84, 100.0, 100.0]');
        var culmativeData =JSON.parse('[0.0, 7.0, 14.0, 21.0, 28.0, 34.0, 41.0, 48.0, 55.0, 62.0, 69.0, 76.0, 83.0, 89.0, 96.0, 103.0, 110.0, 117.0, 124.0, 131.0, 138.0, 144.0, 151.0, 158.0, 165.0, 172.0, 179.0, 186.0, 193.0, 200.0, 206.0, 213.0, 220.0, 227.0, 234.0, 241.0, 248.0, 255.0, 261.0, 268.0, 275.0, 282.0, 289.0, 296.0, 303.0, 310.0, 316.0, 323.0, 330.0, 337.0, 344.0, 351.0, 358.0, 365.0, 372.0, 378.0, 385.0, 392.0, 399.0, 406.0, 413.0, 420.0, 427.0, 433.0, 440.0, 447.0, 454.0, 461.0, 468.0, 475.0, 482.0, 488.0, 495.0, 502.0, 509.0, 516.0, 523.0, 530.0, 537.0, 544.0, 550.0, 557.0, 564.0, 571.0, 578.0, 585.0, 592.0, 599.0, 605.0, 612.0, 619.0, 626.0, 633.0, 640.0, 647.0, 654.0, 660.0, 667.0, 674.0, 681.0, 688.0]');
        var dataArray = [['X','Test']];
        for(i = 0; i < bin.length; i++){
            dataArray.push([culmativeData[i], bin[i]]);
        }
        var data = new google.visualization.arrayToDataTable(dataArray);
        var options = {
            title: 'Test',
            curveType: 'function',
            legend: { position: 'bottom' },
            vAxis:{ title:'Probability (%)',
                viewWindow:{ min:0, max: 100}
            },
            hAxis:{ title:'Cost',
            format: 'currency'}
        };
        var chart = new google.charts.Line(document.getElementById('chart'));
        chart.draw(data, google.charts.Line.convertOptions(options));
    }   
    $( document ).ready(function(){
        google.charts.load('current', {'packages':['line']});
        google.charts.setOnLoadCallback(drawGLine);
    });
</script>
</head>
<body>
<div id="chart"></div>
</Body>
</HTML>

我过去看到过jquery与Google图表冲突的问题,
特别是setOnLoadCallback方法

谷歌。setOnLoadCallback无法获取文档元素
GoogleChart不能在MVC中工作

要排除这些,建议删除jquery

google的callback可以在load语句中直接引用
你可以依靠callback来知道页面什么时候准备好了
所以真的不需要$( document ).ready

建议尝试下面的代码片段…

function drawGLine() {
    var bin =JSON.parse('[0.65, 0.78, 1.16, 1.68, 2.0, 2.56, 3.03, 3.65, 4.51, 5.16, 6.0, 6.58, 7.47, 8.57, 9.58, 10.38, 11.28, 12.25, 13.03, 13.78, 14.8, 15.69, 16.49, 17.33, 18.06, 18.96, 20.49, 21.85, 22.94, 24.14, 25.31, 26.27, 27.22, 28.12, 29.87, 31.56, 32.58, 33.67, 35.14, 37.33, 38.41, 40.02, 41.87, 43.31, 44.98, 46.03, 47.84, 49.1, 50.81, 52.38, 54.17, 55.37, 57.3, 59.13, 61.14, 63.39, 64.43, 65.92, 67.53, 69.04, 70.82, 72.07, 73.17, 74.9, 76.63, 78.16, 79.2, 80.33, 81.09, 82.36, 83.34, 84.35, 85.27, 86.48, 87.58, 88.37, 89.25, 89.89, 90.68, 91.24, 92.2, 92.83, 93.87, 94.82, 95.38, 95.94, 96.58, 97.21, 97.45, 97.85, 98.25, 98.57, 98.81, 98.81, 99.28, 99.44, 99.44, 99.6, 99.84, 100.0, 100.0]');
    var culmativeData =JSON.parse('[0.0, 7.0, 14.0, 21.0, 28.0, 34.0, 41.0, 48.0, 55.0, 62.0, 69.0, 76.0, 83.0, 89.0, 96.0, 103.0, 110.0, 117.0, 124.0, 131.0, 138.0, 144.0, 151.0, 158.0, 165.0, 172.0, 179.0, 186.0, 193.0, 200.0, 206.0, 213.0, 220.0, 227.0, 234.0, 241.0, 248.0, 255.0, 261.0, 268.0, 275.0, 282.0, 289.0, 296.0, 303.0, 310.0, 316.0, 323.0, 330.0, 337.0, 344.0, 351.0, 358.0, 365.0, 372.0, 378.0, 385.0, 392.0, 399.0, 406.0, 413.0, 420.0, 427.0, 433.0, 440.0, 447.0, 454.0, 461.0, 468.0, 475.0, 482.0, 488.0, 495.0, 502.0, 509.0, 516.0, 523.0, 530.0, 537.0, 544.0, 550.0, 557.0, 564.0, 571.0, 578.0, 585.0, 592.0, 599.0, 605.0, 612.0, 619.0, 626.0, 633.0, 640.0, 647.0, 654.0, 660.0, 667.0, 674.0, 681.0, 688.0]');
    var dataArray = [['X','Test']];
    for(i = 0; i < bin.length; i++){
        dataArray.push([culmativeData[i], bin[i]]);
    }
    var data = new google.visualization.arrayToDataTable(dataArray);
    var options = {
        title: 'Test',
        curveType: 'function',
        legend: { position: 'bottom' },
        vAxis:{ title:'Probability (%)',
            viewWindow:{ min:0, max: 100}
        },
        hAxis:{ title:'Cost',
        format: 'currency'}
    };
    var chart = new google.charts.Line(document.getElementById('chart'));
    chart.draw(data, google.charts.Line.convertOptions(options));
}
google.charts.load('current', {
  callback: drawGLine,
  packages: ['line']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

编辑

除了上面的

,使用先前的或冻结的版本也可能有帮助
而不是使用'current'版本

最新冻结版本,此时,是'45'
你可以回到'41'

在这个特殊的情况下'44'版本纠正了这个问题,即

google.charts.load('44', {
  callback: drawGLine,
  packages: ['line']
});

建议使用冻结版本,
确保'current'版本更新时不会出现问题…