Google圖表只能在運行應用程序時顯示一次

我的Google圖表只能在運行應用程序時加載一次。當我導航到其他頁面並返回到具有谷歌圖表的頁面時，圖表不會顯示。我必須再次刷新或運行應用才能顯示圖表。Google圖表只能在運行應用程序時顯示一次

<section> 
<html> 
<div class="container"></div> 

<div id="columnchart_values" style="width: 1200px; height: 700px;"></div> 
    <script type="text/javascript"> 
    google.charts.load("current", {packages:["corechart"]}); 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
     ["Week", "# of F2F=0"], 
     ["WK1", 9], 
     ["WK2", 5], 
     ["WK3", 6], 
     ["WK4", 0], 
     ["WK5", 0], 
     ["WK6", 0], 
     ["WK7", 0], 
     ["WK8", 0], 
     ["WK9", 0], 
     ["WK10", 0], 
     ["WK11", 0], 
     ["WK12", 0] 
     ]); 

     var view = new google.visualization.DataView(data); 
     var options = { 
     title: "Dashboard", 
     titleTextStyle: { 
      fontSize: 21 
      }, 
     'backgroundColor': 'transparent', 
     width: 1600, 
     height: 650, 
     bar: {groupWidth: "70%"}, 
     legend: { position: "top" }, 
     }; 
     var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values")); 
     chart.draw(view, options); 
    } 
    </script> 

<div id="piechart_3d" style="width: 1200px; height: 700px;"></div> 
    <script type="text/javascript"> 
     google.charts.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Calls', 'People'], 
      ['F2F = 0', 6], 
      ['1 < F2F < 5', 8], 
      ['F2F > 9', 5] 
     ]); 

     var options = { 
      title: 'Period: 2QWK3', 
      titleTextStyle: { 
      fontSize: 21 
      }, 
      'backgroundColor': 'transparent', 
      is3D: true, 
     }; 

     var chart = new google.visualization.PieChart(document.getElementById('piechart_3d')); 
     chart.draw(data, options); 
     } 
    </script> 
</html> 
</section>

來源

2016-05-13 sxxxxxxx

一個空函數調用你的'script'上'window.onload' – Pugazh

呼籲window.onload所需script並呼籲window.onunload

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<section> 
 
    <html> 
 
    <div class="container"></div> 
 

 
    <div id="columnchart_values" style="width: 1200px; height: 700px;"></div> 
 
    <script type="text/javascript"> 
 
    window.onload = function() { 
 
     google.charts.load("current", { 
 
     packages: ["corechart"] 
 
     }); 
 
     google.charts.setOnLoadCallback(drawChart); 
 

 
     function drawChart() { 
 
     var data = google.visualization.arrayToDataTable([ 
 
      ["Week", "# of F2F=0"], 
 
      ["WK1", 9], 
 
      ["WK2", 5], 
 
      ["WK3", 6], 
 
      ["WK4", 0], 
 
      ["WK5", 0], 
 
      ["WK6", 0], 
 
      ["WK7", 0], 
 
      ["WK8", 0], 
 
      ["WK9", 0], 
 
      ["WK10", 0], 
 
      ["WK11", 0], 
 
      ["WK12", 0] 
 
     ]); 
 

 
     var view = new google.visualization.DataView(data); 
 
     var options = { 
 
      title: "Dashboard", 
 
      titleTextStyle: { 
 
      fontSize: 21 
 
      }, 
 
      'backgroundColor': 'transparent', 
 
      width: 1600, 
 
      height: 650, 
 
      bar: { 
 
      groupWidth: "70%" 
 
      }, 
 
      legend: { 
 
      position: "top" 
 
      }, 
 
     }; 
 
     var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values")); 
 
     chart.draw(view, options); 
 
     } 
 
    }; 
 

 
    window.onunload = function(){}; 
 
    </script> 
 

 
    <div id="piechart_3d" style="width: 1200px; height: 700px;"></div> 
 
    <script type="text/javascript"> 
 
    google.charts.setOnLoadCallback(drawChart); 
 

 
    function drawChart() { 
 
     var data = google.visualization.arrayToDataTable([ 
 
     ['Calls', 'People'], 
 
     ['F2F = 0', 6], 
 
     ['1 < F2F < 5', 8], 
 
     ['F2F > 9', 5] 
 
     ]); 
 

 
     var options = { 
 
     title: 'Period: 2QWK3', 
 
     titleTextStyle: { 
 
      fontSize: 21 
 
     }, 
 
     'backgroundColor': 'transparent', 
 
     is3D: true, 
 
     }; 
 

 
     var chart = new google.visualization.PieChart(document.getElementById('piechart_3d')); 
 
     chart.draw(data, options); 
 
    } 
 
    </script> 
 

 
    </html> 
 
</section>

來源

2016-05-13 08:12:17 Pugazh

Google圖表只能在運行應用程序時顯示一次

回答

相關問題