javascript - 如何以给定的时间间隔重新渲染从 Rails Controller 检索数据的图形？

Question

我有一个 Highchart 图表，需要每分钟重新生成一次。我很好奇如何刷新下图？ http://pastebin.com/bEwkX8Fk

我认为也许只是刷新 div 就足够了，但经过进一步思考，我意识到我可能必须从 Controller 发起某种调用来更新图表的数据。关于正确的方法有什么想法吗？

我现在在想，也许使用 Highcharts json 功能更新它是最好的，但我还不确定从哪里开始。

Answer 1

您需要向服务器设置一个 ajax 请求，每隔 X 毫秒轮询一次，最好使用像这样的 jquery。

var ajax_path = #{action_controller_path}
function pollData() {
  $.ajax({
    type: 'get',
    url: ajax_path,
    success: function(data) {
      // update chart
      var series = chart.series[0],
            shift = series.data.length > 20; // shift if the series is longer than 20          
      chart.series[0].addPoint(data, true, shift);

      setTimeout(pollData, 60000) // Poll data every 60s
    }
  });
}

在 Rails 端，您需要创建一个 Controller#action 来提供此 ajax 请求，请记住将您的responds_to 设置为包含 json。与此类似，请“按原样”使用此代码:

respond_to :json, only: [:polling_action]
def polling_action
  @data_point = Model.get_data
  respond_with @data_point
end

我认为 @nikita-beloglazov 引用的文章中阐述了如何实际更新图表的具体细节:http://www.highcharts.com/documentation/how-to-use在这里 http://www.highcharts.com/ref/#series-object对于 addPoint (Object options, [Boolean redraw], [Boolean shift], [Mixedanimation]) api 引用，这是您使用 ajax 轮询方法加载数据点后应该调用的内容。

注意:请记住，除非您知道数据更新的时间间隔，否则轮询数据并不是一个非常有效的过程。考虑到您只需要每 60 秒更新一次此数据，这可能不是问题，只是将其发布给其他可能偶然发现这一点的人。