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

因此它产生了这张图：

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

1 个答案: