谷歌图表没有在Safari上显示

时间:2016-04-30 21:47:10

标签: javascript html

我正在尝试用Google图表绘制一个饼图。它在Chrome和我的Firefox上运行良好,但不适用于朋友的Firefox和Safari。我经历过我能想到或读到的一切。当我查看来源时,id是正确的。

为了缩小范围,我在console.log中添加了一些文本,首先是在document.ready之后,其次是在drawchart函数中。 “文档就绪”文本出现在所有浏览器上,但在某些浏览器上,它根本不会进入绘图功能。

以下是我在HTML头中设置的方法。

<head>
    <script src="http://code.jquery.com/jquery-1.9.0rc1.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script src="js/sortable.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>$(function() { $( ".SStabs" ).tabs(); }); </script>

    <!--Load the charts API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


</head>

还有一些其他的东西,比如JQuery UI,不确定它们是否会发生冲突或其他什么。

然后在我的JS中我有......

$(document).ready(function() {

console.log('Document Ready');

// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

});

我的绘图功能就是这个....请注意,在失败的浏览器上,它甚至不会显示控制台日志文本。在其他方面,它一直工作并正确显示图表,所以我不认为这是这个功能的问题。我认为问题在于回调,因为它甚至没有达到这个功能。

function drawChart() {
    console.log('Drawchart');

    var thisChartElement = document.getElementById('match_stat_pie_chart0');

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'test');
    data.addColumn('number', 'kkkk');
    data.addRows([
      ['a', 9],
      ['b', 8]
    ]);

    // Set chart options
    var options = {'title':'Percentage of Play', colors:['red', 'blue'], 'is3D':true, 'width':400, 'height':300};

    // Instantiate and draw the chart, passing in the options.
    var chart = new google.visualization.PieChart(document.getElementById('match_stat_pie_chart0'));
    chart.draw(data, options);
}

ID是正确的,我已经剪切并粘贴以确保拼写完全正确。正如我所说,它适用于多种浏览器。

1 个答案:

答案 0 :(得分:0)

我知道这是一个老问题,但是您可以尝试将google.charts.setOnLoadCallback(drawChart)放在$(document).ready之外

google.charts.setOnLoadCallback(drawChart)在其他函数中存在一些问题