Question

正如标题所说，有时它会很好地加载，有时它根本不显示。（适用于所有浏览器）

当它没有时： http://puu.sh/hpkjT/097c9e3e67.png

此代码在关闭body标签之后但在关闭html标记之前加载到页面中。

    var rankedSolo5 = {
          GamesPlayed: 0,
          Wins: 0,
          Losses: 0,
          WinPercent: 0,
          Assists: 0,
          Kills: 0,
          MinKills: 0,
          NeutralMinKills: 0,
          TurretsKilled: 0,
          AverageKills: 0,};


$.ajax({
    url: 'https://'+summonerRegion+'.api.pvp.net/api/lol/'+summonerRegion+'/v1.4/summoner/by-name/'+summonerName+'?api_key=76555fa3-4e44-4b11-8692-f2cfad2fd30d',
    dataType: 'json',

    //If summoner doesn't exist show error

    error : function(jqXHR, textStatus, errorThrown) { 
        if(jqXHR.status == 404 || errorThrown == 'Not Found'){ 
            $(".statsValue").html(summonerError);}},

    //If summoner is found, find Id of summoner     

    success: function(response) {
        nameToId = response;
        console.log(nameToId);
        console.log(nameToId[summonerName].name);
        $('#summonerProfileName').html(nameToId[summonerName].name);
        summonerId = nameToId[summonerName].id;
        $.ajax({
        url: 'https://'+summonerRegion+'.api.pvp.net/api/lol/'+summonerRegion+'/v1.3/stats/by-summoner/'+summonerId+'/summary?season=SEASON2015&api_key=76555fa3-4e44-4b11-8692-f2cfad2fd30d',
        dataType: 'json',

    //When Id is found, retrieve Stats

    success: function(response) {
    if (summonerName != undefined){
        jsonData = response;
        console.log(jsonData);


        //Ranked Solo 5v5 Stats


        rankedSolo5["Wins"] = jsonData.playerStatSummaries[5].wins;

        rankedSolo5["Losses"] = jsonData.playerStatSummaries[5].losses;

        rankedSolo5["Assists"] = jsonData.playerStatSummaries[5].aggregatedStats.totalAssists;
        $("#rankedAssistsSolo5 .statsValue").html(rankedSolo5["Assists"]);

        rankedSolo5["Kills"] = jsonData.playerStatSummaries[5].aggregatedStats.totalChampionKills;
        $("#rankedKillsSolo5 .statsValue").html(rankedSolo5["Kills"]);

        rankedSolo5["MinKills"] = jsonData.playerStatSummaries[5].aggregatedStats.totalMinionKills;
        $("#rankedMinKillsSolo5 .statsValue").html(rankedSolo5["MinKills"]);

        rankedSolo5["NeutralMinKills"] = jsonData.playerStatSummaries[5].aggregatedStats.totalNeutralMinionsKilled;
        $("#rankedNeutralMinKillsSolo5 .statsValue").html(rankedSolo5["NeutralMinKills"]);

        rankedSolo5["TurretsKilled"] = jsonData.playerStatSummaries[5].aggregatedStats.totalTurretsKilled;
        $("#rankedTurretsKilledSolo5 .statsValue").html(rankedSolo5["TurretsKilled"]);

            //Ratios, Etc...
                rankedSolo5["GamesPlayed"] = rankedSolo5["Wins"]+rankedSolo5["Losses"];
                $("#rankedGamesPlayedSolo5 .statsValue").html(rankedSolo5["GamesPlayed"]);

                rankedSolo5["WinPercent"] = Math.floor(rankedSolo5["Wins"]*(100/(rankedSolo5["Wins"]+rankedSolo5["Losses"])))+"%";
                $("#rankedWinPercentSolo5").html(rankedSolo5["WinPercent"]);


        //Draw the charts after data is collected
            chart();

        }



            }
        });
    }
});}

google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Stats');
    data.addColumn('number', 'Stats');
    data.addRows([
      ['Wins', rankedSolo5["Wins"]],
      ['Losses', rankedSolo5["Losses"]],
    ]);

    var data2 = google.visualization.arrayToDataTable([
      ['M/T Ratio', 'Minion Kills/Turret Kills'],
      ['Minion Kills', rankedTeam5["MinKills"]],
      ['Turret Kills', rankedTeam5["TurretsKilled"]]
    ]);

    var options = {
      width: 200,
      height: 200,
      colors: ['#337ab7', '#ff5e5e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
      pieHole: 0.4,
      backgroundColor: {fill: 'none'},
      pieSliceBorderColor:"transparent",
      legend: 'none',
      chartArea: {'width': '85%', 'height': '85%'},
      pieSliceText: 'label',
      fontSize: 11,

    };



    setTimeout(function(){
        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
            chart.draw(data, options);
        var chart2 = new google.visualization.PieChart(document.getElementById('donutchart2'));
            chart2.draw(data2, options);
        var chart3 = new google.visualization.PieChart(document.getElementById('donutchart3'));
            chart3.draw(data2, options);
        var chart4 = new google.visualization.PieChart(document.getElementById('donutchart4'));
            chart4.draw(data2, options);
    },250);
  }



google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Stats');
    data.addColumn('number', 'Stats');
    data.addRows([
      ['Wins', rankedSolo5["Wins"]],
      ['Losses', rankedSolo5["Losses"]],
    ]);

    var data2 = google.visualization.arrayToDataTable([
      ['M/T Ratio', 'Minion Kills/Turret Kills'],
      ['Minion Kills', rankedTeam5["MinKills"]],
      ['Turret Kills', rankedTeam5["TurretsKilled"]]
    ]);

    var options = {
      width: 200,
      height: 200,
      colors: ['#337ab7', '#ff5e5e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
      pieHole: 0.4,
      backgroundColor: {fill: 'none'},
      pieSliceBorderColor:"transparent",
      legend: 'none',
      chartArea: {'width': '85%', 'height': '85%'},
      pieSliceText: 'label',
      fontSize: 11,

    };



    setTimeout(function(){
        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
            chart.draw(data, options);
        var chart2 = new google.visualization.PieChart(document.getElementById('donutchart2'));
            chart2.draw(data2, options);
        var chart3 = new google.visualization.PieChart(document.getElementById('donutchart3'));
            chart3.draw(data2, options);
        var chart4 = new google.visualization.PieChart(document.getElementById('donutchart4'));
            chart4.draw(data2, options);
    },250);
  }

我的头标记如下：

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>

任何帮助解决这个问题都将非常感激。

Answer 1

由于某些原因，如果您没有在实际DOM容器上设置宽度和高度，则谷歌图表将无法一致地呈现（即，它不足以依赖options中的宽度和高度设置）< / p>

Google Chart不会总是在页面加载时加载

1 个答案: