ruby - Chartkick Datepicker/Range Selector - 选择日期显示数据的可能性

Question

我正在使用 ahoy gem 跟踪访问情况，并使用 chartkick gem 向用户显示数据。

在用户仪表板页面中，我有大约 3-4 个图表，每个图表向用户显示不同的数据。

截至今天，我的图表仅显示过去 7 天，我按 group_by_day(:started_at, last: 7) 显示。

= area_chart Visit.where(user: current_user).group_by_day(:started_at, last: 7).sum(:price), label: '$'

我如何添加 datepicker 以便用户可以选择两个日期(开始和结束日期)并显示所选日期/给定日期之间的数据？

更新:我创建了 charts_controller.rb 并从此 controller 和 routes 获取图表。

例如:

class ChartsController < ApplicationController
  def visits
    result = Visit.where(user: current_user).group_by_day(:started_at, last: 7).count
    render json: [{name: 'Visits', data: result}]
  end

我的routes.rb:

resources :charts, only: [] do
    collection do
      get 'visits'
    end
  end

我的观点:

= area_chart visits_charts_path

Answer 1

您可以创建一个 datepicker 并在其上添加一个 onchange 监听器，然后使用 ajax 将开始和结束日期发送到呈现图表的 Controller :

$(".end_at").change(function(e){
    end_at = $(e.target).val(); 
    start_at = $(".start_at").val();     

      $.ajax({
        type: "POST",
        url: "/charts",
        data: {
          start_at: start_at,
          end_at: end_at,
        },
        success: function (data) {
          $(".chart-container").html(data);
        },
      });    
});

在你的 Controller 中:

class ChartsController < ApplicationController
  def visits
    start_at = params[:start_at].to_date
    end_at = params[:end_at].to_date
    render :inline => "<%= area_chart Visit.where(user: current_user).group_by_day(:started_at, range: start_at..end_at).sum(:price), label: '$' %>"
  end
end