Rails中的Google Charts 3.1 Ajax Partial

Question

Rails中的Google Charts 3.1 Ajax Partial

use*_*849 6 javascript ajax jquery google-visualization ruby-on-rails-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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Yon*_*ciu 8

在您的主页面中保留这些(不需要在部分中加载谷歌图表):

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

Run Code Online (Sandbox Code Playgroud)

在你的部分你需要做类似下面的事情(假设你使用jQuery).重点是在加载dom 之后执行js代码,这是$(function(){....})的作用:

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

Run Code Online (Sandbox Code Playgroud)

使用像jQuery这样的库可以节省许多小时的浏览器不一致性,以便知道dom何时正确加载.

归档时间：	13 年，9 月前
查看次数：	1618 次
最近记录：	13 年，1 月前