在Highcharts中,要同时显示柱形上的数字和百分比,可以使用formatter函数来自定义柱形上的标签。下面是一个示例代码:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '柱形图示例'
    },
    xAxis: {
        categories: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
        title: {
            text: '值'
        }
    },
    series: [{
        name: '数据',
        data: [10, 20, 30, 40, 50],
        dataLabels: {
            enabled: true,
            formatter: function() {
                var percentage = (this.y / this.total * 100).toFixed(1);
                return this.y + ' (' + percentage + '%)';
            }
        }
    }]
});

在上面的代码中,dataLabels选项用于设置数据标签的样式和内容。enabled设置为true表示启用数据标签。formatter函数用于自定义数据标签的显示内容。在函数中,this.y表示柱形的值,this.total表示所有柱形的总值。使用这两个值可以计算出百分比,并将其与柱形的值一起显示在柱形上。

通过修改formatter函数中的代码,你可以根据需要自定义数据标签的显示格式

highcharts柱形图柱形上如何同时显示数字和百分比

原文地址: https://www.cveoy.top/t/topic/ikOV 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录