如何在Cube.js折线图中为不同人群分组单独绘制对应折线

你只需要调整数据查询、图表映射两个环节即可实现需求，基础折线图的参考效果如下：

1. 修改Cube.js查询配置 #

在原有折线图的查询逻辑里，把你需要用来分组的人群属性维度（比如你定义的user_group、crowd_type这类字段）加到dimensions数组里就行，参考代码如下：

const query = {
  measures: ['Users.count'], // 对应y轴的人数字段
  timeDimensions: [
    {
      dimension: 'Users.createdAt', // 对应x轴的自定义时间字段
      granularity: 'day' // 可根据需求调整时间粒度
    }
  ],
  dimensions: ['Users.crowdGroup'], // 新增你要拆分折线的人群分组维度
  order: {
    'Users.createdAt': 'asc'
  }
}

加完这个维度后，Cube.js会自动按「时间+人群分组」的组合完成人数聚合，你不用自己额外处理数据的分组计算。

2. 适配前端图表配置 #

根据你用的图表组件类型做简单的映射配置即可：

• 用Cube.js官方配套的LineChart组件：不需要额外改配置，组件会自动识别查询里新增的分组维度，自动为每个分组生成独立折线，同时自动生成对应图例
• 自行对接ECharts、Chart.js等第三方图表库：调用结果集的series()方法拆分每个分组的序列数据，再映射到图表的series配置项就行，参考代码：

// 从Cube.js返回的结果集里提取各分组的折线数据
const lineSeries = resultSet.series().map(seriesItem => ({
  name: seriesItem.title, // 人群分组名称，用作折线图例
  data: seriesItem.series.map(point => point.value) // 该分组每个时间点对应的人数
}))
// 把生成的lineSeries数组传入对应图表库的配置即可

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