1

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

SO问题：NVD3堆积条形图加线重叠

（在 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 并完成我需要的工作？

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

如果可能的话，我想避免一个高度复杂的解决方案，因为这些抽象的重点是避免这种复杂性。但是，欢迎所有解决方案。

4

2 回答 2

4

我找到了答案：

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

chart: {
            type: 'multiChart',
...
            callback: function (chart) {
                chart.bars1.stacked(true);
                chart.bars2.stacked(true);
                chart.update();
            },
...
        }
    };
于 2016-03-17T16:13:15.673 回答
0

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

https://github.com/novus/nvd3/blob/master/examples/multiChart.html（repo 示例涵盖的内容比网站更多）

于 2019-04-12T14:39:36.247 回答