堆叠从 y 轴开始的重叠条形图答案

【问题标题】：Overlapping bar charts where stacks start from y axis堆叠从 y 轴开始的重叠条形图
【发布时间】：2013-12-10 13:40:03
【问题描述】：

是否有可能使用 dc.js 构建一个条形图，其中堆栈不相互重叠？目前，我的代码生成的图表如下所示：

相反，我希望每个堆栈条从 y 轴开始，而不是从前一个堆栈值结束的值开始。这可能/将导致条重叠，因此增加透明度可能会有所帮助。一个简单的 css 规则可能在这里起作用：

 .dc-chart rect.bar { opacity: 0.75; }

【问题讨论】：

标签： dc.js

【解决方案1】：

您可能希望构建一个包含每个类别的条形图的复合图表。

您可以像这样为图表中的每种颜色建立一个组：

        usaGroup = categoryDimension.group().reduceSum(dc.pluck('usa')),
        russiaGroup = categoryDimension.group().reduceSum(dc.pluck('russia'));

这是一个 jsFiddle 来演示这一点：http://jsfiddle.net/djmartin_umich/nK6K7/

composite
    .width(400)
    .height(300)
    .x(d3.scale.ordinal().domain([1,2,3]))
    .xUnits(dc.units.ordinal)
    .yAxisLabel("User Count")
    .renderHorizontalGridLines(true)
    .compose([
        dc.barChart(composite)
        .centerBar(true)
        .gap(100)
        .colors('red')
        .dimension(categoryDimension)
        .group(russiaGroup),
        dc.barChart(composite)
        .centerBar(true)
        .gap(100)
        .colors('blue')
        .dimension(categoryDimension)
        .group(usaGroup)])
    .brushOn(false)
    .render();

您需要调整样式...当不透明度降低时，蓝色和红色会组合成紫色。

【讨论】：

正是我想要的：我忽略了文档中关于复合图表的部分。