使用NVD3实现分组和堆积多重条形图

Question

可能是重复问题，参考链接：JavaScript中的条形图：堆叠条形图+分组条形图

我正在尝试创建一个堆叠条形图，可以比较两个值（深蓝色和中蓝色）与上周的数据点（次要的浅蓝色“背景”）。

1. 从使用 multiBarChart() 和 .stacked(true) 开始，我试图将两个星期合并成一个包含 14 条柱形图的数组，其中 x 位置可以帮助分组。我试图形成一个合并后的对象数组，其中 .x 属性值为 0、0.3、1、1.3、2、2.3 等。 不幸的是，与 lineChart() 不同，它不使用 x 值进行定位。

2. 另一个想法是利用组 .stacked(false)，提供 4 个项目（而不是 2 个）具有相同的 x 值。这些条目会重叠在彼此上方，而不是堆叠。 这里间距看起来很好，但如何将它们 2 对 2 堆叠？

- Gon Zifroni

Answer 1

嘿，我刚刚在d3.js上开发了分组+堆叠条形图。虽然它不是NVD3，但它可能对你有所帮助。

• 源代码

• 演示

- gencay

Answer 2

首先声明，我并不是nvd3专家。我自己也只是刚刚入门。

话虽如此，看起来你让自己的工作变得太难了。

我认为你真正想要做的是向nvd3发送两组数据，其中x值在两组数据之间匹配。（例如，(1,y1a) 对应 (1,y2a)，然后 (2,y2a) 对应 (2,y2b)，以此类推。）

你可以通过以下方式更清楚地看到这一点：

1. 前往他们的Live Code page页面
2. 选择Group/Stacked Bar Chart。
3. 选择Data (JSON)选项卡。
4. 用以下内容替换第一个函数，并观察结果的x值：

    function() {
      return stream_layers(2,10,.1).map(function(data, i) {
        alert( 'Stream '+i+': '+JSON.stringify(data));
        return {
          key: 'Stream' + i,
          values: data
        };
      });
    }

据我所了解，这就是您要寻找的模型。

- Glenn