Rails Ruby 上的 Chartkick 分组堆叠 Bar/Column 图表

Question

我有两个数据集，其中包含由 AI 自动收集的数据和另一个由人类手动收集的数据。我目前使用 Chartkick for Rails:

将它们显示为两个单独的柱形图

如上所示，AI 数据显示为堆叠柱形图，显示已确认、拒绝和未验证数据的细分，因为我们仍在进行确认检查以查看 AI 的准确性，而人工操作数据按原样显示，因此无需使用堆积柱形图。

现在，我想要实现的是并排（分组）显示 AI 和人工操作数据，同时保持 AI 数据的堆叠属性。所以它应该是这样的：

我目前拥有的两个单独图表的代码是：

controller

# Data for Stacked Column Chart
@ai_operated_data = [
  {
     name: "Confirmed",
     data: PotentialViolator.where(confirmation_status: 1).group_by_week(:capture_time).count
  },
  {
     name: "Rejected",
     data: PotentialViolator.where(confirmation_status: 0).group_by_week(:capture_time).count
  },
  {
     name: "Unverified",
     data: PotentialViolator.where(confirmation_status: -1).group_by_week(:capture_time).count
  }
]

# Data for Single Column Chart
@human_operated_data = [
  {
     name: "Human Operated Data",
     data: ManuallyCaughtViolator.group_by_week(:capture_time).count
  }
]

view

<div class="ui container">
    <h1>Performance Analytics</h1>
    <div class="ui divider"></div>
      <%= column_chart @ai_operated_data, stacked: true %>
      <%= column_chart @human_operated_data %>
</div>

Answer 1

我能够从 Chartkick.js examples 中找到示例并发现只有 stack 选项可以作为参数传递以指定系列是否属于堆栈与否。

我 view 中的最终代码现在看起来像：

<%= column_chart [
        {
            name: "Confirmed AI-PWD Operated Data",
            data: PotentialViolator.where(confirmation_status: 1).group_by_week(:capture_time).count,
            stack: "stack 1"           
        },
        {
            name: "Rejected AI-PWD Operated Data",
            data: PotentialViolator.where(confirmation_status: 0).group_by_week(:capture_time).count,
            stack: "stack 1"                
        },
        {
            name: "Unverified AI-PWD  Operated Data",
            data: PotentialViolator.where(confirmation_status: -1).group_by_week(:capture_time).count,
            stack: "stack 1"                
        },
        {
            name: "PWD-Operated Data",
            data: ManuallyCaughtViolator.group_by_week(:capture_time).count,
            stack: "stack 2"
        }
    ], stacked: true
%>

因此它生成了这张图表：

Rails Ruby 上的 Chartkick 分组堆叠 Bar/Column 图表

Grouped Stacked Bar/Column Chart with Chartkick on Ruby on Rails

ruby-on-rails

chartkick