基于Chartkick实现多折线图渲染及线条配色的解决方案

1. 修复chart_json未定义错误 #

chart_json并非ActiveRecord集合的内置方法，直接调用会触发NoMethodError，需要手动构造Chartkick兼容的JSON数据格式。

2. 构造多折线图所需数据结构 #

Chartkick要求多折线图的数据是包含多个系列的数组，每个系列需指定名称和对应的数据点。修改控制器代码如下：

def land_based_stats
  uniq_dates = # 保留你原有的日期获取逻辑
  @land_based = LandBased.order(date: :asc).where('date in (?) AND typology_id = ?', uniq_dates, 1)

  # 构造每个折线系列
  series = [
    {
      name: 'Attribute One',
      data: @land_based.pluck(:date, :attribute_one).to_h,
      color: '#ff0000' # 自定义折线颜色
    },
    {
      name: 'Attribute Two',
      data: @land_based.pluck(:date, :attribute_two).to_h,
      color: '#00ff00'
    },
    {
      name: 'Attribute Three',
      data: @land_based.pluck(:date, :attribute_three).to_h,
      color: '#0000ff'
    },
    {
      name: 'Attribute Four',
      data: @land_based.pluck(:date, :attribute_four).to_h,
      color: '#ffa500'
    }
  ]

  render json: series
end

关键说明： #

• 将date与对应属性pluck后转为哈希，Chartkick会自动把日期映射为X轴，属性值映射为Y轴
• 每个系列的name会作为折线的图例名称
• color字段支持十六进制、RGB等颜色格式，用于指定单条折线的颜色

3. 视图端调用保持不变 #

视图中的代码无需修改：

<%= line_chart land_based_stats_path, title: 'Land based' %>

可选：统一在视图设置颜色 #

如果不想在控制器指定颜色，也可以在视图的line_chart方法中通过colors参数批量设置（颜色会按系列顺序对应）：

<%= line_chart land_based_stats_path, 
               title: 'Land based',
               colors: ['#ff0000', '#00ff00', '#0000ff', '#ffa500'] %>

4. 额外注意事项 #

• 确保查询结果按date: :asc排序，保证X轴日期顺序正确
• 若属性值为字符串类型（如控制台显示的"12.0"），Chartkick会自动转换为数值，但建议在模型中将对应字段设为float类型，避免潜在格式问题

内容的提问来源于stack exchange，提问作者Jerome