在Ruby on Rails上使用Chartkick的分组堆叠条形图/柱状图

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
%>

所以它会生成这个图表：

​

​