使用NVD3分组和堆叠multiBarChart

Question

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

我正在尝试创建一个堆积条形图，让您可以比较2个值（深蓝色和中蓝色）与上周的数据点（次要亮蓝色'后面'）。

1. 首先使用multiBarChart() .stacked(true)开始，我尝试将两周合并为一个包含14个小节的数组，其中x位置可以帮助对小节进行分组。我试图形成我的组合对象数组，其中.x属性的值为0，0.3，1，1.3，2，{ {1}}等 不幸的是，与2.3不同，它不会使用lineChart()值进行定位。

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

Answer 1

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

• Source

• Demo

Answer 2

我先告诉我，我不是nvd3专家。我自己几乎没有进入起步阶段。

那就是说，看起来你自己也太难了。

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

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

1. 前往Live Code page
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
        };
      });
    }

我理解的最好，那就是你正在寻找的模型。