如何更改图例位置？

Question

我是 AngularJS 的新手，我使用 NDV3 制作了甜甜圈饼图，只是想将图例移到右侧，但我无法让它工作。

现在我尝试使用 legendposition 将图例移动到圆环饼图的右侧，但它不起作用。谁能指导我如何操作？谢谢

这是我的代码：Plunker

Answer 1

NVD3 不支持更改图例位置的选项。您必须手动执行或修改源代码。您当然也可以将 CSS 修改为 nv-legendWrap 并尝试定位图例。

我找到了一个解决方法，您可以通过覆盖默认 transform 属性来使用 CSS 中的位置。第一个值是 X 位置，第二个值是 Y 位置。

.nv-series:nth-child(1){ transform: translate(0, 0); }
.nv-series:nth-child(2){ transform: translate(0, 20px); }
.nv-series:nth-child(3){ transform: translate(0, 40px); }
.nv-series:nth-child(4){ transform: translate(0, 60px); }
.nv-series:nth-child(5){ transform: translate(0, 80px); }
.nv-series:nth-child(6){ transform: translate(0, 100px); }
.nv-series:nth-child(7){ transform: translate(0, 120px); }

.nv-legend{ transform: translate(350px, 100px); }

Here 是您的 Plunker 中的预览

如何更改图例位置？

How do I change the legend position?

angularjs

nvd3.js

donut-chart