angularjs - 如何更改图例位置？

Question

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

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

这是我的代码:Plunker

Answer 1

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

---

我找到了一个解决方法，您可以通过覆盖默认的 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 中的预览