javascript - Highcharts - 嵌套切片圆环图

标签 javascript highcharts

我正在尝试创建一个嵌套饼图/圆环图,其中内环显示一个“组”(例如汽车制造商),外环显示该“组”的分割(例如每个制造商制造的模型)制造商)。

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

/image/cdGRn.jpg

我已经设法使用 slicedslicedOffset 属性(上面的图片实际上是我的图表的屏幕截图)来实现此功能,但是这会产生奇怪的效果(请参阅当“团体”较少时。

我整理了一个 fiddle 来演示当内环中的组较少时图表看起来如何奇怪。当内环中只有一两个项目时,看起来真的很糟糕:

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

我想知道是否有更好的方法来达到我需要的结果?可能 sliced 不是正确的方法,因为它不是它的预期用途。我还能如何获得项目之间的间隙?

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

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

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

谢谢!

最佳答案

您可以添加一些透明的虚拟数据点。该解决方案需要一些计算才能获得良好的视觉效果。

jsFiddle:http://jsfiddle.net/25acys4j/4/

透明切片示例:

{x: 0,
 y: 3,
 color: 'rgba(0,0,0,0)'
},

关于javascript - Highcharts - 嵌套切片圆环图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27378647/

相关文章:

javascript - 具有非堆叠百分比系列的 Highcharts 条形图

highcharts - 如何在 Highcharts 中使用外部按钮导出 CSV 和 XLS

javascript - Highcharts 极坐标图显示特定刻度季度的标签

Javascript:快速查找对象中的值(就像我们可以使用属性一样)

javascript - jQuery 操作仅一次/自定义 URL

javascript - Jquery Mobile - 关闭对话框后跳转固定标题(firefox)

javascript - 什么时候不应该使用 React 备忘录?

javascript - 在 Protractor 中启用元素时单击

javascript - Highcharts : Change opacity of a column chart

R highcharter : putting heatmaps into motion