Rails：谷歌图表只在重新加载后才加载

Question

我在我的查看页面中包含Google图表，但问题是我总是需要重新加载查看页面才能显示Google图表。当我单击链接并转到此视图页面时，Google图表从不显示。

这是因为我使用Ruby on Rails吗？

当我进入该页面时，如何在首次显示时显示它。

下面的代码我认为，包括谷歌图表：

<!-- Append content in the head tag in layout view--> 
<% content_for :for_head do %> 
    <title>Analysis</title> 

    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script><!--Load the Google JSAPI library--> 
    <script type="text/javascript">//<!--Load the Google Visualization and chart libraries--> 
    // Load the Visualization API library and the piechart library. 
    google.load('visualization', '1', {'packages':['corechart']}); 
    //Immediately after calling google.load(), your code should call google.setOnLoadCallback(my_handler), a Google JSAPI function that calls your handler as soon as all the libraries are loaded. 
    //Your handler function should create and define the chart. 
    google.setOnLoadCallback(drawChart); 

    // My handler function is called drawChart 
    // Callback that creates and populates a data table, 
    // instantiates the pie chart, passes in the data and 
    // draws it. 
    function drawChart() { 

     //First, create a DataTable 
     var dt = new google.visualization.DataTable(); 
     dt.addColumn('string', 'Book Color'); //the first column is about the color of the book 
     dt.addColumn('number', 'boooks');  // second column is about the number of the book that has corresponding color 
     dt.addRows([ 
     ['Yellow',3], 
     ['Red',4], 
     ['Blue',8], 
     ['Green',13], 
     ['Purple',2], 
     ['Brown',4], 
     ['Violet',9], 
     ['Orange',10], 
     ['White',7], 
     ['Black',2] 
     ]); 

     //Set chart options, inlcuding title and dimension 
     var opt = { 
     'title': 'How many books do I have?', 
     'is3D':true 
     }; 

     //Instantiates a chart and specify which container does this chart will go to 
     var ch = new google.visualization.PieChart(document.getElementById('chart_div_1')); //Here we instantiate a chart as a PieChart that will go into the container whose id is named chart_div_1 

     //Using the above chart instance, draw a chart according to the datatable and options we defined earlier 
     ch.draw(dt, opt); 
    } 
    </script> 
<% end %> 

<!--Div that will hold the pie chart--> 
<div id="chart_div_1" style="width:800; height:600"></div> 

Answer 1

试试这个

<!-- Append content in the head tag in layout view--> 
<% content_for :for_head do %> 
    <title>Analysis</title> 

动了你的元素在这里。

<!--Div that will hold the pie chart--> 
<div id="chart_div_1" style="width:800; height:600"></div> 


    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script><!--Load the Google JSAPI library--> 
    <script type="text/javascript">//<!--Load the Google Visualization and chart libraries--> 
function showGraph() { 
    // Load the Visualization API library and the piechart library. 
    google.load('visualization', '1', {'packages':['corechart']}); 
    //Immediately after calling google.load(), your code should call google.setOnLoadCallback(my_handler), a Google JSAPI function that calls your handler as soon as all the libraries are loaded. 
    //Your handler function should create and define the chart. 
    google.setOnLoadCallback(drawChart); 

    // My handler function is called drawChart 
    // Callback that creates and populates a data table, 
    // instantiates the pie chart, passes in the data and 
    // draws it. 
    function drawChart() { 

     //First, create a DataTable 
     var dt = new google.visualization.DataTable(); 
     dt.addColumn('string', 'Book Color'); //the first column is about the color of the book 
     dt.addColumn('number', 'boooks');  // second column is about the number of the book that has corresponding color 
     dt.addRows([ 
     ['Yellow',3], 
     ['Red',4], 
     ['Blue',8], 
     ['Green',13], 
     ['Purple',2], 
     ['Brown',4], 
     ['Violet',9], 
     ['Orange',10], 
     ['White',7], 
     ['Black',2] 
     ]); 

     //Set chart options, inlcuding title and dimension 
     var opt = { 
     'title': 'How many books do I have?', 
     'is3D':true 
     }; 

     //Instantiates a chart and specify which container does this chart will go to 
     var ch = new google.visualization.PieChart(document.getElementById('chart_div_1')); //Here we instantiate a chart as a PieChart that will go into the container whose id is named chart_div_1 

     //Using the above chart instance, draw a chart according to the datatable and options we defined earlier 
     ch.draw(dt, opt); 
    } 
} 
    window.onload = showGraph; 
    </script> 
<% end %> 

而且包装上加载事件