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>

ROUTE：

...
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中按钮上显示年度图表

1 个答案: