Google Chart IE9问题(未定义)

时间:2016-10-11 12:20:47

标签: javascript html google-visualization

我正在开发一些图表,以便在所有支持的浏览器中使用,并且只在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>

1 个答案:

答案 0 :(得分:1)

我曾经看到过jquery与谷歌图表冲突的问题,
特别是使用setOnLoadCallback方法

google.setOnLoadCallback not able to get the document elements
GoogleChart not working in MVC

要排除这些,建议删除jquery

google callback可以直接在load声明中引用 并且您可以依赖callback来了解页面何时准备就绪 所以真的不需要$( document ).ready

建议您尝试以下代码段...

&#13;
&#13;
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']
});
&#13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
&#13;
&#13;
&#13;

编辑

除了上述内容之外,使用之前或冻结版本也可能有所帮助 而不是使用'current'版本

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

在此特定情况下,版本'44'更正了问题,即

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

建议使用冻结的版本,
确保在更新'current' release时某些内容不会中断...