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中的预览

如何更改图例位置？

1 个答案: