Question

我正在构建一个包含大量图表的应用程序。我想通过Ajax加载图形以减少初始加载时间。这是当前仪表板视图的样子。

  <section class="container">
    <section class="row">
      <div class="span6 graph-container">
        <h3 class="box-header"><i class="icon-truck"></i>Service Levels</h3>
        <div class="box">
            <img src="/assets/loading.gif" class="loading" />
           <%= content_tag :div, "", id: "shipments-by-service-type", data: {shipments: @charts[:service_analysis][:spend_data]} %>
        </div>
      </div>
       <div class="span6 graph-container">
        <h3 class="box-header"><i class="icon-circle"></i>Weight Summary</h3>
        <div class="box">
          <%= content_tag :div, "", id: "weight-ranges", data: {weight: @charts[:weight_analysis][:spend_data]} %>
        </div>
      </div>
    </section>
    <section class="row">
      <div class="span6 graph-container">
        <h3 class="box-header"><i class="icon-road"></i>Zone Summary</h3>
        <div class="box">
          <%= content_tag :div, "", id: "weight-groups-zones", data: {zone: @charts[:zone_analysis][:spend_data]} %>
        </div>
      </div>
       <div class="span6 graph-container">
        <h3 class="box-header"><i class="icon-time"></i>Spend Over Time</h3>
        <div class="box">
          <%= content_tag :div, "", id: "shipping-trends", data: {trends: @charts[:shipping_trends][:spend_data]} %>
        </div>
      </div>
    </section>
  </section>

我当前的想法是成为一个名为charts_controller.rb的控制器。这将包含每个图表的所有逻辑，并具有视图或部分与方法对应，然后通过Ajax加载每个图表观点。

class ChartsController < ApplicationController

  before_filter :authenticate_user!, :company_id

  def service_level
   #logic for service_level graph
   respond_to do |format|
     format.html
     format.js
   end
  end

end

例如，

我刚开始在rails中使用Ajax，我不知道如何去做。这种方法有意义吗？

Answer 1

您可以在服务器端部分“绘制”图表。如果您正在使用jQuery，那么您可以使用jQuery.load函数：

$('#graph-div').load('/my_restful_route');

控制器会有类似的东西：

render partial: 'chart_partial'

通过Ajax加载视图

1 个答案: