首页 文章

Highcharts:森伯斯特图表能否显示百分比份额来描绘像饼图一样的整体关系?

提问于
浏览
0

百分比份额用于描述图表中的部分与整体关系 .

观察饼图系列数据标签中使用的 point.percentage 属性,以显示相对于整个图表的百分比份额:http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/pie-basic/

plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            style: {
                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            }
        }
    }
}

我想实现以下目标:
Sunburst chart with percentage share

这个例子的参考:https://www.grapecity.com/en/blogs/sunburst-chart-roadmap-what-would-you-like-to-see

我知道,相对于父母和整个图表的上述百分比份额可以通过手动设置相应的值来实现 . 但这涉及手动计算 .

我想知道Highcharts是否支持Sunburst图表的point.percentage . 它没有在API参考中给出,我也没有在JS Fiddle中调试一个例子 . 有没有其他方法来实现它?

1 回答

  • 1

    不, point.percentage 仅适用于堆叠系列或馅饼:https://api.highcharts.com/class-reference/Highcharts.Point#.percentage

    但是,如果您使用 dataLabels.formatter ,它's easy to calculate the percentage for each slice. In the formatter function, you' ll可以访问当前切片( point )和所有其余图表数据:

    Percentage share w.r.t parent slice

    dataLabels: {
        formatter: function() {
            var point = this.point,
                group = this.series.data.filter(x => x.parent === point.parent);
    
            var groupTotal = group.map(x => x.value).reduce((a, b) => a + b, 0),
                percentage = 100 * point.value/groupTotal;
    
            return point.name + '<br>' + percentage.toFixed(1) + '%';
        },
    },
    

    http://jsfiddle.net/cre0psov/1/

相关问题