Rails 5-Google Charts仅在页面刷新时显示，而不在初始页面加载时显示

Question

我正在Rails 5应用页面上显示Google Charts饼图。

仅当我单击刷新时才显示图表，而不是在初始页面加载时显示。

看来我不是第一个遇到此问题的人，但是我尝试过的所有解决方案都没有成功-即设置超时。

任何指导将不胜感激。

/layouts/application.html.erb

<head>
...
<%= yield :google_chart_scripts %>
...
</head>

/views/organisations/show.html.erb

<% content_for :google_chart_scripts do %>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});

            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {
               var data = google.visualization.arrayToDataTable([
                  ['Effort', 'Amount given'],
                  ['Debt', 100.00],
                  ['Equity', 900.00]
               ]);

               var options = {
                  colors:['#f75b52','#363e4a'],
                  pieHole: 0.4,
                  pieSliceText: 'percentage',
                  chartArea: {'width': '90%', 'height': '90%'},
                  legend: 'none'
               };

               var chart = new google.visualization.PieChart(document.getElementById('piechart')%>'));
               chart.draw(data, options);
               }

</script>
<% end %>

Answer 1

那是turbolink的问题，尝试用以下代码包装js代码：

$(document).on('ready page:load', function () {
  // your google chart js
});

有关此问题的更多详细信息，请点击此处

Answer 2

使用turbolink时，您经常会遇到此问题。 一种解决方案是使用jquery-turbolinks gem。

gem 'jquery-turbolinks'

您只需在application.js文件中包含jquery之后立即添加jquery.turbolinks。 （或您正在使用的清单文件）

它将Rails Turbolinks事件绑定到document.ready事件，因此您可以轻松编写jQuery。 如果您的项目中发生其他情况，这将有所帮助

希望这可以帮助。

Rails 5-Google Charts仅在页面刷新时显示，而不在初始页面加载时显示

问题描述

2 个解决方案

解决方案1
0 2017-04-05 06:23:37

解决方案2
0 2017-04-05 07:15:01

Rails 5-Google Charts仅在页面刷新时显示，而不在初始页面加载时显示

问题描述

2 个解决方案

解决方案1 0 2017-04-05 06:23:37

解决方案2 0 2017-04-05 07:15:01

解决方案1
0 2017-04-05 06:23:37

解决方案2
0 2017-04-05 07:15:01