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
相关产品推荐
相关产品推荐

