gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 19:07:14 27 4
gpt4 key购买 nike

我正在构建一个基于 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指令用百分比替换标签。

最佳答案

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

pie chart with offset legend

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

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

#piechart svg { width: 350px; }

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

关于legend - 在 dc.js 中为饼图添加图例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21459683/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com