我试图创建一个嵌套的饼图/圆环图,其中内圈显示一个'组' (例如汽车制造商)并且外圈显示该组'的分类。 (例如每个制造商制造的模型)。
我需要对各个片段进行分解/切片,使其看起来像这样:
我已经设法使用sliced
和slicedOffset
属性来实现这一点(上面的图片实际上是我的图表的屏幕截图),但是这会产生奇怪的效果(请参阅小提琴)更少的团体'。
我已经把一个小提琴放在一起,以证明当内环中的组数较少时图表看起来很奇怪。当内圈中只有一件或两件物品时,它看起来非常糟糕:
http://jsfiddle.net/danielcrisp/784jzLe2/
我想知道是否有更好的方法来达到我要求的结果?可能sliced
不是正确的方法,因为它不是预期的用途。我怎样才能在项目之间找到差距?
注意:图表将显示在照片上,因此我无法使用边框来创建效果。
更新:如果片段之间的间距是规则的,例如, 10px,与第一个屏幕截图中显示的不规则间距不同。
透明边框应该是完美的解决方案,但不幸的是它们不会掩盖段填充颜色。
谢谢!
答案 0 :(得分:1)
您可以添加一些透明的虚拟数据点。该解决方案需要一些计算才能获得良好的视觉效果。
jsFiddle:http://jsfiddle.net/25acys4j/4/
透明切片的示例:
{x: 0,
y: 3,
color: 'rgba(0,0,0,0)'
},
答案 1 :(得分:0)
尝试调整圆环图,边框如下:http://jsfiddle.net/25acys4j/。当您将边界定义为rgba();