带线的Angular-NVD3堆叠条形图
我是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并在不更改库的情况下完成所需的任务？
理想情况下，解决方案应该是纯配置。下一个最理想的情况是在运行时从我的封闭组件内部设置“堆栈”值，但我似乎无法访问该对象。
如果可能的话，我希望避免高度复杂的解决方案，因为这些抽象的全部要点是为了避免这样的复杂性。但是，所有解决方案都是受欢迎的。
回答 2
Stack Overflow用户
发布于 2016-03-17 16:13:16
我找到了答案：
您可以更改配置中指定的callback()事件处理程序中的堆叠值：
chart: {
type: 'multiChart',
...
callback: function (chart) {
chart.bars1.stacked(true);
chart.bars2.stacked(true);
chart.update();
},
...
}
};Stack Overflow用户
发布于 2019-04-12 14:39:36
使用multiChart。要获得并排的条形图，请在两个条形图数据集上设置yAxis: 1。
https://github.com/novus/nvd3/blob/master/examples/multiChart.html (回购示例涵盖了更多内容，而不仅仅是网站)
https://stackoverflow.com/questions/36047869
复制
相似问题
Chart.js绘制带限制线的堆叠条形图
带标签的堆叠条形图
带堆叠条的条形图
带matplotlib的堆叠条形图
堆叠条形图上的ChartJS注释线
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
