使用 NVD3 分组和堆叠的 multiBarChart答案

【问题标题】：Grouped and stacked multiBarChart with NVD3使用 NVD3 分组和堆叠的 multiBarChart
【发布时间】：2012-10-11 23:58:08
【问题描述】：

Bar chart in Javascript: stacked bars + grouped bars可能重复的问题

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

首先从multiBarChart() 和.stacked(true) 开始，我尝试将两个星期合并为一个包含14 个柱的数组，其中x 位置可以帮助对柱进行分组。我试图形成我的对象组合数组，其中.x 属性的值为0、0.3、1、1.3、2、2.3 等。不幸的是，与lineChart() 不同，它不使用x 值进行定位。
另一个想法是利用.stacked(false) 组，提供具有相同x 值的4 个项目（而不是2 个）。然后这些看起来是相互重叠的，而不是堆叠的。这里的间距看起来不错，但是如何将这些 2 x 2 堆叠？

【问题讨论】：

标签： javascript charts nvd3.js

【解决方案1】：

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

Source
Demo

【讨论】：

【解决方案2】：

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

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

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

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

前往他们的Live Code page
选择组/堆积条形图。
选择数据 (JSON) 选项卡。
将第一个函数替换为以下内容，并观察生成的 x 值。：


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

据我所知，这就是您正在寻找的模型。

【讨论】：