Highcharts:在Sunburst图表中实现类似于饼图的爆炸剖面行为

时间:2017-11-10 09:35:59

标签: javascript charts highcharts sunburst-diagram

目前,饼图的属性切片显示饼图中的爆炸部分。

参考:http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/point/sliced/

但是,Highcharts API参考在Sunburst图表中不显示任何支持此行为的属性。 我尝试在以下示例中设置数据点切片属性。

JS小提琴:http://jsfiddle.net/ng3bgckt/

 {
'id': '1.3',
'parent': '0.0',
'name': 'Asia',
'sliced': true
 },

切片属性在亚洲数据点设置为true,但未显示为爆炸部分。

以下是Sunburst图表的示例,其中包含爆炸部分:

链接1:http://helpcentral.componentone.com/nethelp/FlexChartWin/SunburstChart.html

链接2:https://www.grapecity.com/en/blogs/getting-started-with-net-sunburst-chart-for-wpf-winforms-and-uwp

在Highcharts中有没有办法在Sunburst图表中实现爆炸剖面行为?或者,如果切片和切片的属性可用于Sunburst图表吗?

1 个答案:

答案 0 :(得分:0)

目前在旭日系列中不支持sliced选项。

您可以在此处分享将此功能添加到sunburst的想法:https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api

或尝试自己实施。这个实例展示了如何为金字塔图表编码切片机制(对于旭日来说,它可以类似地完成+必须考虑点层次结构):http://jsfiddle.net/kkulig/xpopxw1z/

 point: {
        events: {
          click: function() {
            var translate = {
              translateX: this.graphic.translateX ? 0 : slicedOffset,
              translateY: 0
            }
            this.graphic.animate(translate);
          }
        }
      }