将图例添加到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画布，然后将其放在中心。我将该SVG画布作为目标并添加了不同的宽度并显示。通过画布偏移标签会使其隐藏。

因此，如果您的饼图宽度为200，ID为“饼图”，并且您想要添加额外的150个像素来考虑标签，请尝试使用以下CSS：

#piechart svg { width: 350px; }

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