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

Question

默认情况下，我使用 chartkick 和 highcharts 在我的视图中显示每月数据的图表。我已经准备好用于显示年度图表的散列，但如何在按钮单击时显示年度图表。我的 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

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

how can I show yearly chart on buttonclick in rails

ruby-on-rails

chartkick