highcharts条形图 条形上如何同时显示数字和百分比
要在Highcharts条形图上同时显示数字和百分比,您可以使用Highcharts的dataLabels选项来实现。
首先,您需要确保在图表的plotOptions中启用series的dataLabels选项。然后,您可以使用formatter函数来自定义数据标签的显示内容。
以下是一个示例代码:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y + ' (' + Math.round(this.percentage * 100) / 100 + '%)';
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0]
}]
});
在上面的代码中,formatter函数返回了一个字符串,其中包含了条形的值和百分比。this.y表示条形的值,this.percentage表示条形占总和的百分比。
您可以根据需要进一步自定义formatter函数的显示内容
原文地址: https://www.cveoy.top/t/topic/ikVm 著作权归作者所有。请勿转载和采集!