Highcharts 饼图同时显示数量与百分比的实现方法
作者:函数茶馆时间:2026-10-30 18:03:32浏览:613
本文介绍如何在 Highcharts 库中配置饼图,使其在图表中同时显示具体数值和所占百分比。通过示例代码展示关键配置项,帮助开发者快速实现包含数量与比例信息的饼图展示功能。
Highcharts 饼图显示数量和百分比实例代码
Highcharts 饼图同时显示数量与百分比的示例代码
项目背景与实现思路
近期公司项目提出了一项功能需求,要求在 Highcharts 饼图中同时展示具体数值和百分比。由于本人刚开始接触相关开发,面对这一需求时不知如何下手,于是通过网络搜索相关资料,发现一篇不错的文章,特此记录以备后用。
核心代码实现
<div class="piecleft" id="chart" style="height:350px; width: 350px;">
</div>
<script type="text/javascript" charset="utf-8">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart'
},
title: {
text: '版本分布分析'
},
plotArea: {
shadow: null,
borderWidth: null,
backgroundColor: null
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+
Highcharts.numberFormat(this.y, 0, ',') +' 个)';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
if (this.percentage > 4) return this.point.name;
},
color: 'white',
style: {
font: '13px Trebuchet MS, Verdana, sans-serif'
}
}
}
},
legend: {
backgroundColor: '#FFFFFF',
x: 0,
y: -30
},
credits: {
enabled: false
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['1.1',3617],
['1.2.1',3436],
['1.0',416],
['1.3',2],
['1.2',1],
['新增对比',5000]
]
}]
});
});
</script>
总结
感谢阅读,希望本文能对大家有所帮助,也谢谢各位对本站的支持!
作者最新文章
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
