highcharts如何饼图上显示占比图例中显示数量
在Highcharts中,可以通过使用formatter函数来自定义饼图的数据标签和图例。下面是一个示例代码,演示如何在饼图上显示占比,并在图例中显示数量:
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: '饼图示例'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
// 显示占比
return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.y / this.total * 100, 1) + '%';
}
}
}
},
series: [{
name: '数量',
colorByPoint: true,
data: [{
name: '项目1',
y: 5
}, {
name: '项目2',
y: 10
}, {
name: '项目3',
y: 15
}]
}],
legend: {
labelFormatter: function() {
// 在图例中显示数量
return this.name + ': ' + this.y;
}
}
});
在上述代码中,plotOptions.pie.dataLabels.formatter函数用于自定义饼图上的数据标签,它将显示每个项目的名称和占比。legend.labelFormatter函数用于自定义图例中的标签,它将显示每个项目的名称和数量。
注意,以上代码中使用的是Highcharts的JavaScript库,需要将它引入到页面中才能正常运行
原文地址: https://www.cveoy.top/t/topic/hWfG 著作权归作者所有。请勿转载和采集!