Chartkick column_chart 不同的颜色不起作用

Question

我关注this tutorial 使用Chartkick 和Chartjs 设置我的图表。我想为我的column_chart 更改我的数据集的颜色并尝试this solution，它确实更改了默认颜色，但是，所有列仍然显示相同的颜色。

我的控制器中有这个设置：

# detected_vehicles_controller (API)
  def by_total_count_per_vehicle_type
    query_params = { q: { 'detection_time_eq' => @date } }
    detected_vehicles = DetectedVehicle.group(:vehicle_type).search_by_params(query_params).count
    render json: parse_vehicle_type_data(detected_vehicles).chart_json
  end

  private

  def parse_vehicle_type_data(data)
    vehicle_type_datasets = []
    data.each do |key, value|
      dataset = {}
      dataset['name'] = key
      dataset['data'] = { key => value }
      vehicle_type_datasets << dataset
    end
  end

并在我的初始化程序中设置我的颜色

# config/initializers/Chartkick.rb
Chartkick.options = {
    colors: ["#63b598", "#ce7d78", "#ea9e70", "#a48a9e", "#c6e1e8"]
}

这些代码是从以下视图和助手触发的：

# _graphs.html.slim (partial)
.ui.grid.stackable
  .sixteen.wide.column
    = viz_total_count_per_vehicle_type(@date)

# helper
  def viz_total_count_per_vehicle_type(date)
    column_chart by_total_count_per_vehicle_type_api_analytics_detected_vehicles_path(date: date)
  end

这些代码生成以下脚本和图表：

更新： 我删除了我在config/initializers/Chartkick.rb 中设置的颜色的配置，并尝试在我的助手中的library 选项中传递backgroundColor，但它不起作用。

# Helper
  def viz_total_count_per_vehicle_type(date, location)
    column_chart by_total_count_per_vehicle_type_api_analytics_detected_vehicles_path(date: date, location: location),
                 library: background_color
  end

  private

  def background_color
    {
      fill: false,
      backgroundColor: [
        'rgba(75, 192, 192, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)'
      ],
      borderColor: [
        'rgba(75, 192, 192)',
        'rgba(255, 99, 132)',
        'rgba(255, 159, 64)',
        'rgba(255, 205, 86)',
        'rgba(54, 162, 235)',
        'rgba(153, 102, 255)',
        'rgba(201, 203, 207)'
      ],
      borderWidth: 2
    }
  end

Answer 1

现在终于找到了一个可行的解决方案，尽管我认为它不是理想的解决方案。

我所做的是我删除了options 中的colors，我在config/initializers/Chartkick.rb 中设置了它，并在我在控制器中渲染json 时传递了它。所以我的控制器方法看起来像：

# detected_vehicles_controller (API)
  before_action :load_data

  def by_total_count_per_vehicle_type
    chart_data = @detected_vehicles.group(:vehicle_type).count
    render json: [{ data: parse_vehicle_type_data(chart_data),
                    library: background_color }].chart_json
  end

  private

  def load_data
    query_params = { q: { 'detection_time_eq' => @date, 'camera_camera_area_eq' => @location } }
    @detected_vehicles = DetectedVehicle.search_by_params(query_params)
  end

  def parse_vehicle_type_data(data)
    vehicle_type_datasets = []
    data.each do |key, value|
      dataset = {}
      dataset['name'] = key
      dataset['data'] = { key => value }
      vehicle_type_datasets << dataset
    end
  end

  def background_color
    {
      fill: false,
      backgroundColor: [
        'rgba(75, 192, 192, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)'
      ],
      borderColor: [
        'rgba(75, 192, 192)',
        'rgba(255, 99, 132)',
        'rgba(255, 159, 64)',
        'rgba(255, 205, 86)',
        'rgba(54, 162, 235)',
        'rgba(153, 102, 255)',
        'rgba(201, 203, 207)'
      ],
      borderWidth: 2
    }
  end

所以我的图表现在看起来像：