Question

我问建议。谷歌图表并不总是在第一次尝试时加载...如何解决这个问题？

视图：

<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([
      ['Time', 'TempC'],
     <% @data.css("hourly").each do |hrly| %>     
     ['<%= hrly.css("time").text %>',<%= hrly.css("tempC").text %>],
     <% end %>
    ]);
    var options = {
      title: 'Temperature forecast'
    };
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
<div id="chart_div" style="width: 100%; height: auto;"></div>

控制器

class WwoController < ApplicationController
def weather
require 'nokogiri'

url = "https://api.worldweatheronline.com/premium/v1/weather.ashx?q=59.94%2C30.31&num_of_days=4&key=***********************************"
@data = Nokogiri::XML(open(url))

end
end

Answer 1

如果您使用turbolinks，请尝试在该页面中禁用它，因为我在google maps apis中遇到类似的问题

要停用turbolink，您可以将其添加到您的application.html.erb

<body <%= yield(:body_attributes) %>>

然后在你的view.html.erb中添加第一行

<%= content_for(:body_attributes, 'data-no-turbolink') %>

您还可以使用link_to

禁用turbolink

<%= link_to 'link_name', your_link_path, 'data-no-turbolink' => true %>

如果你使用rails / turbolinks 5 将data-no-turbolink更改为data-turbolinks并切换布尔值

还尝试将您的javascript置于底部。在html dom之后加载它。

Google图表并不总是首次加载

1 个答案: