angularjs - 如何更改图例位置？

Question

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

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

这是我的代码：Plunker

Answer 1

NVD3 不支持更改图例位置的选项。您必须手动完成或修改源代码。您当然也可以修改 CSSnv-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); }

这是您的 Plunker 中的预览