要在Highcharts柱形图中同时显示文字和百分比,你可以使用柱形图的数据标签(dataLabels)选项来实现。

首先,你需要在柱形图的数据系列中设置数据标签的启用状态为true,以及设置标签的格式化函数。在该函数中,你可以获取柱形图的值,并将其转换为百分比形式。

下面是一个示例代码:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '柱形图显示文字和百分比'
    },
    xAxis: {
        categories: ['A', 'B', 'C', 'D']
    },
    yAxis: {
        title: {
            text: '值'
        }
    },
    series: [{
        name: '数据',
        data: [10, 20, 30, 40],
        dataLabels: {
            enabled: true,
            format: '{y} ({point.percentage:.1f}%)'
        }
    }]
});

在上面的代码中,我们设置了柱形图的数据系列的数据标签选项。其中,enabled设置为true表示启用数据标签,format设置为'{y} ({point.percentage:.1f}%)'表示标签的格式为柱形图的值({y})和值的百分比({point.percentage:.1f})。

运行上述代码,你将会看到一个柱形图,每个柱形上显示了对应的值和百分比

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

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

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