dc.js series linechart 如何实现按年份自动生成年度折线

你当前的维度仅提取了月份作为聚合键，所有年份同月份的数据会被合并求和，自然只能生成一条折线。要自动按年份拆分独立数据系列，直接用dc.js原生提供的seriesChart实现成本最低，不需要手动遍历年份创建多个分组，步骤如下： #

1. 调整维度为「月份+年份」复合键 #

不要单独用月份做维度键，返回数组结构的复合键，第一个元素存0-11的月份索引（保证月份排序正确，不会出现月份乱序），第二个元素存年份：

function buildDim() {
  return Data.ndx.dimension(d => {
    const monthIndex = d.DATE.getMonth();
    const year = d.DATE.getFullYear();
    return [monthIndex, year];
  });
}

2. 保留原有聚合逻辑即可 #

复合维度下分组会自动按「月份+年份」的组合聚合，不需要改求和逻辑：

function buildGroup(dim) {
  return dim.group().reduceSum(d => d.VALUE);
}

3. 用系列图替换普通折线图配置 #

系列图会自动按你指定的系列字段（这里是年份）拆分独立折线，不需要手动创建多个group：

const dim = buildDim();
const group = buildGroup(dim);

// 如果你之前初始化的是普通lineChart，替换为seriesChart即可
chartObject = dc.seriesChart("#your-chart-container");

chartObject
  .chart(c => dc.lineChart(c).renderDataPoints({radius: 3})) // 每个子系列渲染为折线，可选显示数据点
  .margins({top: 10, right: 70, bottom: 30, left: 70})
  .x(d3.scaleBand().domain(d3.range(0, 12))) // x轴固定映射0-11共12个月份
  .xUnits(dc.units.ordinal)
  .elasticY(true)
  // 核心映射规则
  .dimension(dim)
  .group(group)
  .keyAccessor(d => d.key[0]) // 复合键第一位：月份作为X轴值
  .seriesAccessor(d => `${d.key[1]}年`) // 复合键第二位：年份作为系列区分维度，自动生成对应折线
  .valueAccessor(d => d.value) // 聚合值作为Y轴
  // 交互和展示配置
  .legend(dc.legend().x(690).y(10).itemHeight(13).gap(5)) // 自动生成年份图例
  .title(d => `${d.key[1]}年${moment.localeData()._months[d.key[0]]}：${d.value}`)
  ;

// X轴刻度格式化显示月份名
chartObject.xAxis().tickFormat(monthIdx => moment.localeData()._months[monthIdx]);

chartObject.render();

补充说明 #

• 不要直接用月份名称作为维度键，用0-11的数字索引可以保证月份顺序永远是1月到12月，避免中文/英文月份名按字典序乱排的问题
• 如果存在部分年份部分月份无数据的情况，可以在分组返回后补全缺失的[月份,年份]键、值设为0，避免折线出现断点
• 如果你坚持要用普通lineChart，也可以手动获取所有不重复年份，为每个年份创建一个过滤后的分组传入，但这种方式需要自己维护图例、颜色映射，代码冗余度远高于直接用seriesChart，不推荐。

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