HighCharts柱状图显示百分比

最新推荐文章于 2021-03-02 15:11:46 发布

原创最新推荐文章于 2021-03-02 15:11:46 发布 · 1.2w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#highCharts #柱状图 #百分比

HighCharts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在HighCharts的普通柱状图上显示百分比，通过配置dataLabels的formatter属性实现自定义显示，包括百分比和具体数值。

HighCharts柱状图没有提供显示百分比的API，只有饼图和堆叠柱状图能显示，调用接口是this.percentage。普通的柱状图想要在柱状图上面显示百分比需要调用formatter格式化输出百分比。

plotOptions: {
    column: {
        dataLabels: {
            enabled: true,  //显示数量提示
            color: '#000000',
            formatter : function() {
                a = this.y/data.total*100;    //a为当前柱状图y轴值除以总数然后乘以100
                return a.toFixed(2) + "%"+"<br/>"+this.y+"个";  //返回百分比和个数
            }
        }
    }
}