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
});

该问题的更多详细信息here

Answer 2

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

gem 'jquery-turbolinks'

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

它会将Rails Turbolinks事件绑定到document.ready事件，这样您就可以轻松编写jQuery。如果您的项目中出现这种情况，这将有助于其他此类情况

希望这有助于。

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

2 个答案: