Google Charts in Rails 3.1 Ajax Partial

Tôi đã làm việc với các biểu đồ của Google mà không có vấn đề gì nhưng bây giờ tôi đã đến lúc tôi cần hiển thị một biểu đồ bên trong phần được trả về Ajax.Google Charts in Rails 3.1 Ajax Partial

Rõ ràng không có gì hiển thị. Tôi biết nó là một cái gì đó để làm với kích hoạt Java để xây dựng biểu đồ không được kích hoạt, nhưng tôi cần một số trợ giúp với chính xác những gì nó là tôi cần phải làm ...

Hiện tại tôi có một cái gì đó như thế này (không 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>

Nguồn

2012-01-19 user1051849

trong trang chính của bạn giữ cho những (không cần phải tải bảng xếp hạng google trong một phần):

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

trong một phần của bạn, bạn cần phải làm điều gì đó như dưới đây (giả sử bạn sử dụng jQuery). Vấn đề là để thực thi mã js sau dom được nạp đó là những gì $ (function() {....}) không:

<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>

Sử dụng một thư viện như jQuery sẽ giúp bạn tiết kiệm nhiều giờ trình duyệt không nhất quán để biết khi nào dom được tải đúng cách.

Nguồn

2012-05-02 02:48:57

Thay

google.setOnLoadCallback(drawChart);

với

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

đã làm các trick cho partials AJAX! Cảm ơn sự giúp đỡ, trước đây DOM đã tải lại nhưng các biểu đồ không được chèn vào.

Nguồn

2012-05-18 21:02:57 JGuo

Trả lời

Các vấn đề liên quan