javascript - 使用 NVD3 分组和堆叠的 multiBarChart

Question

Javascript中条形图的可能重复问题：堆积条形图+分组条形图

我正在尝试创建一个堆积条形图，让您将 2 个值（深蓝色和中蓝色）与上周的数据点（第二个浅蓝色“后面”）进行比较。

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

2. 另一个想法是利用 group .stacked(false)，提供具有相同x值的 4 个项目（而不是 2 个）。然后这些看起来是相互重叠的，而不是堆叠的。 这里的间距看起来不错，但是我如何将这些 2 x 2 堆叠起来？

Answer 1

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

• 资源

• 演示

Answer 2

让我先说一下，我不是 nvd3 专家。我自己也刚过了入门阶段。

也就是说，看起来你对自己太苛刻了。

我想你真的想发送 nvd3 两组数据，x 在两者之间匹配。（例如，(1,y1a) 对应于 (1,y2a)，然后 (2,y2a) 对应于 (2,y2b) 等）

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

1. 前往他们的实时代码页面
2. 选择组/堆叠条形图。
3. 选择数据 (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
        };
      });
    }

据我了解，最好的就是您要寻找的模型。