Angular-NVD3堆积条形图与线

Question

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

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

（SO问题上有一个JS小提琴）。

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并实现我的需求？

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

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

Answer 1

我找到了答案：

您可以更改config中指定的callback（）事件处理程序中的堆栈值：

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

Answer 2

使用multiChart。要并排获得条形，请在两个条形数据集上设置yAxis：1。

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