2016-05-13 3 views
1

. Моя диаграмма 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> 
+0

Обратитесь к '' script' на window.onload' – Pugazh

ответ

0

Вызов требуемого script на window.onload и называют пустой функцией на 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>