小编Phi*_*Lee的帖子

如何使 highcharts 饼图数据标签始终位于每个切片的中心?

我真的很想知道如何使数据标签始终位于饼图中每个切片的中心。

正常状态看起来像这样(你也可以在这里看到这个例子)

在此处输入图片说明

$('#container').highcharts({
    chart: {
        type: 'pie'
    },

    plotOptions: {
        pie: {
            center:  ["50%", "50%"],
            dataLabels: {
                distance: -50
            }
        },
        series:{
            events:{
                load:function(){
                    console.log(this.chartWidth, this.chartHeight);   
                }
            }
        }
    },

    series: [{
        data: [
            ['Firefox',   44.2],
            ['IE7',       26.6],
            ['IE6',       20],
            ['Chrome',    3.1],
            ['Other',    5.4]
        ]
    }]
});
Run Code Online (Sandbox Code Playgroud)

但是,当我减小此图表的宽度或高度时,数据标签组合在一起,如下图所示。我觉得是distance财产问题。我试图动态改变距离但失败了。

在此处输入图片说明

因此,我想要做的是始终将数据标签定位在每个切片的中心,甚至减少/增加图表大小。

html javascript jquery highcharts pie-chart

5
推荐指数
1
解决办法
916
查看次数

标签 统计

highcharts ×1

html ×1

javascript ×1

jquery ×1

pie-chart ×1