如何在 Rails 中单击按钮时显示年度图表

Question

默认情况下，我使用 chartkick 和 highcharts 在我的视图中显示月度数据图表。我已经准备了一个用于显示年度图表的哈希值，但是如何在 buttonclick 上显示年度图表。我的html：

<div class="flot-chart">
  <div class="flot-chart-content" id="flot-dashboard-chart">
    <%= column_chart @chart_by_month ,height: "200px",width: "900px" %>
  </div>
</div>

我添加的按钮只有一个月。我将为年度数据添加图表，但如何通过按钮单击显示它？

<div class="btn-group">
  <button type="button" id="by_month" class="btn btn-xs btn-white">Monthly</button>                                           
</div>

Answer 1

如果我理解你的话，你需要实现Say goodbye to timeouts 部分中描述的 ajax 调用，然后在控制器中添加你想要的过滤器以及 js 功能。不要忘记路线。

有些人喜欢：

HTML：

<div class="flot-chart">
   <div class="flot-chart-content" id="flot-dashboard-chart">
    <%= column_chart chart_by_period_path( period: "month") ,height: "200px",width: "900px" , id: "id_g1" %>
   </div>
</div>

路线：

...
get 'chart_by_period/(:period)', to: "controller#chart_by_period", as: "chart_by_period"
...

JS：

...
var g1     = Chartkick.charts["id_g1"];

$("button#refresh_graph__year_btn").on('click', function(){
    g1.updateData( "/chart_by_period/year");
});
...

控制器：

def chart_by_period
    if params[:period] == "month"
        ...
        output = ....
        ...
    elsif params[:period] == "year" 
        ...
        output = ....
        ...
    end

    render json: output
end