如何解决在饼形图的底部显示最大值-Highcharts
我正在使用图表。我想在饼图的底部显示最大值和值标签。please see the attached screenshot。如果最大值相等,则同时显示值和该标签。
this.pieChart.push(
{
chart: {
type: 'pie',options3d: {
enabled: true,alpha: 45
}
},title: {
text: 'Question Title'
},subtitle: {
text: ''
},plotOptions: {
pie: {
innerSize: 100,depth: 45,dataLabels: {
enabled: true,format: '<b></b><br>{point.percentage:.1f} %',distance: -50,filter: {
property: 'percentage',operator: '>',value: 4
}
}
}
},series: [{
name: 'Answer Selected',data: [
['1st Que ans - 1',3],['1st Que ans - 2',2],['1st Que ans - 3',1],['1st Que ans - 4',2]
]
}]
})
解决方法
这里是一个如何基于所包含的数据并使用render
回调来呈现自定义标签的示例。指令在代码中发生了什么。如果不清楚,请随时询问。
演示:https://jsfiddle.net/BlackLabel/euLyc49j/
events: {
render() {
let chart = this,max = Math.max(...chart.series[0].processedYData);
chart.series[0].points.forEach(p => {
if (p.y === max) {
if (p.customLabel) {
p.customLabel.destroy();
}
//render label in the (0,0)
p.customLabel = chart.renderer.label(p.name + ' - ' + p.y,0)
.css({
color: '#FFFFFF'
})
.attr({
fill: 'rgba(0,0.75)',padding: 8,r: 5,zIndex: 6
})
.add();
// position label in the bottom center
p.customLabel.translate(chart.plotWidth / 2 - p.customLabel.getBBox().width / 2,chart.plotSizeY + chart.plotTop)
}
})
}
}
API:https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
API:https://api.highcharts.com/highcharts/chart.events.render
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。