javascript – 如何使highcharts pie数据标签始终位于每个切片的中心？

2019-07-11 14:34:21 阅读：606 来源： 互联网

标签：jquery javascript highcharts pie-chart html

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

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

$('#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]
        ]
    }]
});

但是,当我减小此图表的宽度或高度时,数据标签会合并,如下图所示.我认为这是距离财产的问题.我试图动态改变距离但失败了.

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

解决方法:

这是困难的一个.根据我的经验,目前还没有一种方法可以直接在每个饼图的中间明确地居中标签.我已经尝试像在您的示例中那样使用相同(不令人满意的)结果来定位标签,尤其是在较小的浏览器窗口中.

我建议使用图例来显示饼图中的类别/类型,或者考虑使用堆叠条形图(参见http://www.highcharts.com/demo/bar-stacked).

我希望这是有帮助的！

标签：jquery,javascript,highcharts,pie-chart,html
来源： https://codeday.me/bug/20190711/1433001.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 如何使highcharts pie数据标签始终位于每个切片的中心？