You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

DC.js最新版本目前是否已支持grouped barchart(分组柱状图)功能?

DC.js 分组柱状图支持情况说明

DC.js 自v2.0及更高版本起,已经原生支持分组柱状图(grouped barchart)功能,无需依赖第三方扩展或自定义修改源码,此前旧帖中提到的不支持情况仅适用于1.x及更早的老旧版本。

实现分组柱状图的核心操作要点如下:

  • 数据预处理:使用crossfilter定义对应维度后,按分组字段将数据拆分为多个独立的分组数据集,比如要按「品类」做大类、「季度」做子分组,就需要按季度拆分出对应数量的分组数据集
  • 基础图表配置:实例化dc.barChart后,完成基础配置:
    • 横轴使用d3.scaleBand序数比例尺,通过padding参数预留子分组的展示空间
    • 开启.centerBar(true)保证柱子在对应刻度区间内居中
    • 配置.xUnits(dc.units.ordinal)匹配序数轴的单位计算规则
  • 多分组数据绑定:第一个分组通过.group()方法绑定,后续所有子分组依次调用.stack()方法绑定,DC.js会自动将多个分组的柱子按序并排渲染,形成分组柱状图效果

你可以参考以下简化示例代码快速实现:

// 假设已完成crossfilter的维度、分组定义,得到group1、group2两个子分组
const groupedBarChart = dc.barChart('#chart-container')
const xScale = d3.scaleBand()
  .domain(['华东', '华北', '华南', '西南'])
  .padding(0.2)

groupedBarChart
  .width(700)
  .height(400)
  .x(xScale)
  .xUnits(dc.units.ordinal)
  .centerBar(true)
  .yAxisLabel('销售额')
  .group(group1, '2023年销售额')
  .stack(group2, '2024年销售额')
  .legend(dc.legend().x(550).y(20))

groupedBarChart.render()

内容的提问来源于stack exchange,提问作者Michael Phandera

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.26 04:06:03