dc.js饼图图例溢出

Posted 2023-02-16

【中文标题】dc.js饼图图例溢出

【英文标题】：Dc.js piechart legend overflowing

【发布时间】：2016-09-24 04:38:40

【问题描述】：

我正在使用 dc.js 来渲染一个带有图例的饼图。但是，当饼图包含大量数据时，所有图例项都不适合，它们只是被隐藏了。如果我检查 DOM，我可以告诉它们是渲染的。

我的问题截图：

我尝试简单地将overflow:scroll; 添加到包含所有图例项的<g class="dc-legend"> 元素。但这不起作用 obv 因为它的 svg。

我已经尝试在谷歌上搜索，但没有找到解决方案。我知道在 highcharts 中有一个选项可以对标签进行分页。

如何在 dc.js 中解决这个问题？

【问题讨论】：

无论图例情况如何，当显示这么多组时，这对于饼图来说都不是一个很好的视觉用例。您能改用其他图表类型吗？

【参考方案1】：

您是否尝试过让容器变宽？您可以使用 .svg 函数返回图表的顶部 svg 元素，在那里您可以设置所需的宽度。更多信息here。

编辑：

或者您可以为包含图形的 div 设置固定的宽度和高度，并使 svg 尽可能大，以便显示标签。然后让 div 可滚动。

查看此答案以获取更多信息：How to get ScrollBars in SVG?

【讨论】：

好吧，我可以让容器更高一些，但是这会弄乱我的布局，你可以从饼图切片的宽度看出这一点。有很多不同的图例项要渲染。我宁愿让我的饼图旁边的图例固定宽度，并使容器可滚动/分页

回答您编辑的答案：现在我们正在取得进展。但是仍然存在一个问题，因为这意味着实际的饼图也将被滚动到视线之外。只有图例必须是可滚动的。

好吧，他们在幕后使用 d3，您可能应该检查是否可以制作一些东西来在另一个容器中呈现标签。根据我的经验，这是在其他库之上使用库的负担，您可能会很快得到结果，但定制会很痛苦:(