Question

之前我使用谷歌图表工作，现在我在app rails中使用，但是当我更改页面并返回图表页面时，他就消失了。

图片示例： https://gist.github.com/joridos/40c4216d30ea689f114a

代码：

application.html.erb：

<%= javascript_include_tag "//www.google.com/jsapi" %>

_administrator_navbar.html.erb：

<%= link_to 'Cabuum', root_path, :class => 'navbar-brand header-title' %>

_user.html.erb：

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

          google.setOnLoadCallback(drawChart);

          function drawChart() {

              var data = google.visualization.arrayToDataTable([
                  ['Status', 'Quantidade'],
                  ['Pagas',     3],
                  ['Vencidas',      2],
                  ['A vencer',      4]
              ]);

              var paymentdata = google.visualization.arrayToDataTable([
                  ['label', 'valor'],
                  ['despesas',     1000],
                  ['receitas',     3000]
              ]);

              var chart = new google.visualization.PieChart(document.getElementById('piechart'));
              var paymentchart = new google.visualization.PieChart(document.getElementById('paymentchart'));

              chart.draw(data, {
                  title: 'Relação de Mensalidades'
              });

              paymentchart.draw(paymentdata, {
                  title: 'Fluxo de caixa'
              });
          }
      </script>
      <div class="col-md-6">
        <div id="piechart" style="width: 600px; height: 500px;"></div>
      </div>
      <div class="col-md-6">
        <div id="paymentchart" style="width: 600px; height: 500px;"></div>
      </div>

知道如何解决这个问题吗？

Answer 1

您可能正在使用Turbolinks，您必须将图表绘制js代码更改为以下内容：

function createChart() {
  // Create chart
}
$(document).ready(createChart);
$(document).on('page:change', createChart)

在rails app中更改页面时，Google图表会消失

1 个答案: