Rails中的Google图表3.1 Ajax部分

我一直在使用Google图表，没有任何问题，但现在我已经到了需要在Ajax呈现的部分内部显示图表的地步。Rails中的Google图表3.1 Ajax部分

显然没有任何显示。我知道这是与Java触发器建立图表没有被激活，但我需要一些帮助，确切地说是我需要做的...

目前我有这样的事情（非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>

来源

2012-01-19 user1051849

在您的主页保持这些（无须加载在部分谷歌图表）：

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

在你的部分，你需要做类似如下（假设你使用jQuery）。问题的关键是的DOM加载后执行JS代码这就是$（函数（）{....}）不：

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

使用库如jQuery会为您节省很多时间浏览器不知道何时正确加载dom。

来源

2012-05-02 02:48:57

更换

google.setOnLoadCallback(drawChart);

与

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

做了AJAX谐音的伎俩！感谢您的帮助，以前DOM重新加载但图表没有被插入。

来源

2012-05-18 21:02:57 JGuo

Rails中的Google图表3.1 Ajax部分

回答

相关问题