将图例添加到dc.js中的饼图

Question

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

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

我的例子的特点是这个图表显示的标签通常很长,通常会被图表的容器(the <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; }

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