Highcharts - 嵌套切片甜甜圈图表

时间:2014-12-09 12:09:53

标签: javascript highcharts

我试图创建一个嵌套的饼图/圆环图,其中内圈显示一个'组' (例如汽车制造商)并且外圈显示该组'的分类。 (例如每个制造商制造的模型)。

我需要对各个片段进行分解/切片,使其看起来像这样:

http://imgur.com/TBtySVa

我已经设法使用slicedslicedOffset属性来实现这一点(上面的图片实际上是我的图表的屏幕截图),但是这会产生奇怪的效果(请参阅小提琴)更少的团体'。

我已经把一个小提琴放在一起,以证明当内环中的组数较少时图表看起来很奇怪。当内圈中只有一件或两件物品时,它看起来非常糟糕:

http://jsfiddle.net/danielcrisp/784jzLe2/

我想知道是否有更好的方法来达到我要求的结果?可能sliced不是正确的方法,因为它不是预期的用途。我怎样才能在项目之间找到差距?

注意:图表将显示在照片上,因此我无法使用边框来创建效果。

更新:如果片段之间的间距是规则的,例如, 10px,与第一个屏幕截图中显示的不规则间距不同。

透明边框应该是完美的解决方案,但不幸的是它们不会掩盖段填充颜色。

谢谢!

2 个答案:

答案 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();

时,边框可以获得透明色