时间戳

首页 > 解决方案 > Chartkick on rails：根据数据改变图表样式

ruby-on-rails - Chartkick on rails：根据数据改变图表样式

问题描述

我正在使用 chartkick highchart 在 rails 应用程序中显示一些图表。我的问题是可以根据图表控制器提供的数据更改图表的样式吗？

例如，这是 chart.html.erb 中的代码：

<%= line_chart charts_cards_history_by_day_path, refresh: 10 %>

有没有办法<%= bar_chart charts_cards_history_by_day_path, refresh: 10 %>根据图表控制器的决定将该代码更改为？因此，图表样式是折线图还是条形图取决于控制器。

谢谢，兰迪

控制器来源：

def cards_history_by_day

      begin

        p_board_id = params['post']['board_id']

        render json:
          [{name: "No. of cards", data: ListsCountPerday.joins(:t_list).where('lists_count_perdays.t_board_id = '+p_board_id+' and
            t_lists.t_list_type_id != 1').group(:date).pluck('date, sum(count)')},
          {name: "Completed", data: ListsCountPerday.joins(:t_list).where('lists_count_perdays.t_board_id = '+p_board_id+' and
            t_lists.t_list_type_id = 5').group(:date).pluck('date, sum(count)')}]

      rescue
        render json: CardHistory.where('t_list_id = -1').group_by_day(:created_at).count
      end

  end

视图来源：

# javascript to handle selection and form submission
<%= javascript_include_tag "charts0" %>

# form for user select prefered data to show
<%= form_tag charts0_cards_history_by_day_path , remote: true do %>
<label for="team_name">Team: </label>
<%= collection_select "post", "authentication_id",
            Authentication.order(:team_name), :id, :team_name, prompt: "Please select"  %>
<label for="team_name">Board: </label>
 <%= grouped_collection_select "post", "board_id",
            Authentication.order(:team_name), :t_board, :team_name, :id, :name, prompt: "Please select" %>
 <%= submit_tag 'Apply', class: 'btn btn-primary' %>
<% end %>

#function to show the chart which data taken from the controller
<%= line_chart charts0_cards_history_by_day_path, refresh:10 %>

javascript源代码：

#javascript to update chart data once form is submitted
$(document).ready(function() {
  $('form').submit(function(e) {
    e.preventDefault();
    data = $(this).serialize();

    Chartkick.eachChart( function(chart) {
      chart.updateData(chart.getDataSource() + '?' + data);
    });

    return false;
  });
});

更新了控制器源（在cards_history_by_day.js.erb 中为Chart.last.data 返回了一个未初始化的常量错误）：

def cards_history_by_day

          begin

            p_board_id = params['post']['board_id']

           #call the .js.erb file (based on the JS tutorial given)
           respond_to do |format|
             format.js
           end

          rescue
            render json: CardHistory.where('t_list_id = -1').group_by_day(:created_at).count
          end

      end

标签： ruby-on-railshighchartschartkick

解决方案

只需根据要测试的数据条件在视图中添加条件逻辑，例如：

<% if @data.condition %>
  <%= line_chart charts_cards_history_by_day_path, refresh: 10 %>
<% else %>
  <%= bar_chart charts_cards_history_by_day_path, refresh: 10 %>
<% end %>

推荐阅读