Google Charts w Rails 3.1 Ajax Partial

Pracowałem z wykresami Google bez żadnych problemów, ale teraz mam do punktu, w którym muszę wyświetlić wykres wewnątrz częściowej renderowanej przez Ajax.Google Charts w Rails 3.1 Ajax Partial

Oczywiście nic nie pokazuje. Wiem, że to ma coś wspólnego z wyzwalaczem Java, aby nie aktywować wykresu, ale potrzebuję pomocy z dokładnie tym, co muszę zrobić ...

Obecnie mam coś takiego (nie-Ajax) :

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Year'); 
     data.addColumn('number', 'Sales'); 
     data.addColumn('number', 'Expenses'); 
     data.addRows([ 
      ['2004', 1000, 400], 
      ['2005', 1170, 460], 
      ['2006', 660, 1120], 
      ['2007', 1030, 540] 
     ]); 

     var options = { 
      width: 400, height: 240, 
      title: 'Company Performance', 
      vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
     }; 

     var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="chart_div"></div> 
    </body> 
</html>

Źródło

2012-01-19 user1051849

na stronie głównej zachować te (nie ma potrzeby, aby załadować wykresy google w częściowe):

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
</script>

w twojej częściowy trzeba zrobić coś jak poniżej (zakładając że używasz jQuery). Chodzi o to, aby wykonać kod js po DOM jest załadowany do czego $ (function() {....}) ma:

<div id="chart_div"></div> 
<script type="text/javascript"> 
    $(function() { 
    drawChart(); 
    }); 

    function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Year'); 
    data.addColumn('number', 'Sales'); 
    data.addColumn('number', 'Expenses'); 
    data.addRows([ 
     ['2004', 1000, 400], 
     ['2005', 1170, 460], 
     ['2006', 660, 1120], 
     ['2007', 1030, 540] 
    ]); 

    var options = { 
     width: 400, height: 240, 
     title: 'Company Performance', 
     vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
    }; 

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

Korzystanie z biblioteki jQuery jak pozwoli Ci zaoszczędzić wiele godzin niespójności przeglądarek, aby wiedzieć, kiedy dom jest poprawnie załadowany.

Źródło

2012-05-02 02:48:57

Wymiana

google.setOnLoadCallback(drawChart);

$(function() { 
    drawChart(); 
});

wystarczyły dla podszablonów AJAX! Dzięki za pomoc, wcześniej DOM przeładowywał, ale wykresy nie były wstawiane.

Źródło

2012-05-18 21:02:57 JGuo

Google Charts w Rails 3.1 Ajax Partial

Odpowiedz

Powiązane problemy