带线的 Angular-NVD3 堆积条形图答案

【问题标题】：Angular-NVD3 Stacked Bar Chart With Line带线的 Angular-NVD3 堆积条形图
【发布时间】：2016-03-16 22:07:21
【问题描述】：

我是 D3、NVD3 和 Angular-NVD3 的新手。我需要使用 Angular-NVD3 创建一个与此类似的图表：

所以问题：NVD3 Stacked Bar Chart Plus Line Overlapped

（在 SO 问题上有一个 JS Fiddle）。

Angular-NVD3 有两个图表，每个图表都完成了我需要的大部分工作，但不是全部：

那就是 MultiBar 和 MultiChart。 (http://krispo.github.io/angular-nvd3/#/quickstart) 例子：

也就是说，我需要一个堆叠条形图，在条形图的顶部覆盖一条（或多条线）。我相信要做到这一点，必须使用“multiChart”而不是“multiBar”图表。（如果我错了，请纠正我）。

上面的 SO 示例修改了 NVD3 库，我想避免这种情况。经过研究，我明白他们为什么选择这种方法。

nv.d3.js（版本 1.8.2），用于 multiChart 对象，第 9068-9069 行：

    bars1 = nv.models.multiBar().stacked(false).yScale(yScale1),
    bars2 = nv.models.multiBar().stacked(false).yScale(yScale2),

如果您将这些行更改为 .stacked(true)，它会堆叠条形。

如何使用 Angular-NVD3 并在不更改库的情况下完成我需要的工作？

理想情况下，解决方案是纯配置。下一个最理想的情况是在运行时从我的封闭组件内部设置“堆叠”值，但我似乎无法访问该对象。

如果可能，我想避免高度复杂的解决方案，因为这些抽象的全部意义在于避免这种复杂性。但是，欢迎所有解决方案。

【问题讨论】：

标签： angularjs d3.js charts nvd3.js angular-nvd3

【解决方案1】：

我找到了答案：

您可以在您的配置中指定的回调（）事件处理程序中更改堆叠值：

chart: {
            type: 'multiChart',
...
            callback: function (chart) {
                chart.bars1.stacked(true);
                chart.bars2.stacked(true);
                chart.update();
            },
...
        }
    };

【讨论】：

【解决方案2】：

使用多图表。要让条形图并排设置，请在两个条形数据集上设置 yAxis: 1。

https://github.com/novus/nvd3/blob/master/examples/multiChart.html （回购示例涵盖的范围比网站更多）

【讨论】：