在 Ruby on Rails 上使用 Chartkick 分组堆积条形图/柱形图答案

【问题标题】：Grouped Stacked Bar/Column Chart with Chartkick on Ruby on Rails在 Ruby on Rails 上使用 Chartkick 分组堆积条形图/柱形图
【发布时间】：2019-01-25 05:23:11
【问题描述】：

我有两个数据集，其中包含由 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>

【问题讨论】：

标签： ruby-on-rails chartkick

【解决方案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
%>

所以它产生了这个图表：

【讨论】：