legend - 在 dc.js 中为饼图添加图例

Question

我正在构建一个基于 dc.js 的可视化，其中一个图表是饼图。看:

http://jsfiddle.net/luiseth/t8we6/

我的案例的特点是该图表将显示的标签通常相当长，以至于通常会被图表的容器( <div> )剪掉。所以我想让它们出现在图例上，但我一直无法弄清楚如何让图例出现在图表的右侧。我怎样才能做到这一点？玩弄 width根本没有帮助，因为图表位于 <div> 的中心.

我目前的代码是:

chart.width(500)
     .height(180)
     .radius(80)
     .dimension(categoryDimension)
     .group(categoryGroup)
     .legend(dc.legend().x(140).y(0).gap(5));

加一个 .label指令用百分比替换标签。

Answer 1

我只是用 CSS 覆盖尝试了这个，它似乎有效:



饼图根据您声明图表的宽度创建一个 SVG Canvas ，然后将其放置在中心。我针对那个 SVG Canvas 并添加了不同的宽度并显示出来。将标签偏移超过 Canvas 会导致它被隐藏。

因此，如果您的饼图宽度为 200，id 为“piechart”，并且您想添加额外的 150 像素来说明标签，请尝试以下 CSS:

#piechart svg { width: 350px; }

请记住在页面布局中考虑该宽度。