向dc.js中的饼图添加图例 [英] Add legend to pie chart in dc.js

问题描述

我正在构建基于dc.js的可视化，其中图表之一是饼图.参见:

I'm building a dc.js-based visualization where one of the charts is a pie chart. See:

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

我的情况的特殊之处在于，此图表将显示的标签通常很长，以至于通常会被图表的容器(<div>)剪切掉.因此，我考虑过将它们显示在图例上，但是我无法弄清楚如何将图例显示在图表的右侧.我怎样才能做到这一点?因为图表位于<div>的中心，所以玩width根本没有帮助.

The peculiarity of my case is that the labels that this chart will display are usually rather long, so much that usually get clipped by the chart's container (the <div>). So I thought of having them appear on a legend, but I haven't been able to figure how to have the legend appear to the right of the chart. How can I do that? Playing around with the width has not helped at all, since the chart gets positioned at the center of the <div>.

此刻我的代码是:

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

加上.label指令以用百分比替换标签.

Plus a .label directive to replace the label with a percentage.

推荐答案

我刚刚使用CSS替代功能尝试了此操作，并且似乎可以正常工作:

I just tried this with a CSS override and it seemed to work:

饼图根据您声明图表的宽度创建SVG画布，然后将其放置在中间.我以SVG画布为目标，并添加了另一个宽度，它显示出来.使标签在画布上偏移会导致其被隐藏.

The pie chart creates an SVG canvas based on what width you declare the chart and then places it in the center. I targeted that SVG canvas and added a different width and it displays. Offsetting the label past the canvas causes it to be hidden.

因此，如果您的饼图的宽度为200，且ID为"piechart"，并且您想添加150个像素来表示标签，请尝试以下CSS:

So if your pie chart has a width of 200, and an id of "piechart", and you want to add an additional 150 pixels to account for the label, try the following CSS:

#piechart svg { width: 350px; }

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

Remember to account for that width in your page layout.

这篇关于向dc.js中的饼图添加图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！