Question

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

问题：NVD3 Stacked Bar Chart Plus Line Overlapped

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

Angular-NVD3有两个图表，每个图表都能满足我的需要，但不是全部：

那些将是MultiBar和MultiChart。（http://krispo.github.io/angular-nvd3/#/quickstart）例子：

也就是说，我需要一个叠加的条形图，其中一条线（或多条线）叠加在条形图的顶部。我相信要做到这一点，必须使用＆＃34; multiChart＆＃34;而不是＆＃34; multiBar＆＃34;图表。（如果我错了，请纠正我。）

上面的SO示例修改了NVD3库，我想避免使用它。经过研究，我可以看出为什么他们选择这种方法。

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

void changingBoolFunction(bool& someBool)
{
    someBool = false;
}

bool changeableBool = true;
changingBoolFunction(someBool);
cout << (changeableBool ? "true" : "false"); // output: false

如果将这些行更改为bars1 = nv.models.multiBar().stacked(false).yScale(yScale1), bars2 = nv.models.multiBar().stacked(false).yScale(yScale2),，它会堆叠条形。

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

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

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

Answer 1

我找到了答案：

您可以在config：

中指定的callback（）事件处理程序中更改堆积值

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

Answer 2

使用多重图表。要并排放置钢筋，请在两个钢筋数据集上设置yAxis：1。

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

Angular-NVD3堆积条形图与线

2 个答案: