时间:2021-05-28
Javascript 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>感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
我们在做excel表格饼图时候有没有发现,比如名称然后数量,但是在饼图一般显示百分比,实际的数目没有显示。或者是直接显示数目,大家有没有想想数目和百分比同时显示
我们在做excel表格饼图时候有没有发现,比如名称然后数量,但是在饼图一般显示百分比,实际的数目没有显示。或者是直接显示数目,大家有没有想想数目和百分比同时
百分比堆积柱形图是比较各个类别的每一数值所占总值的百分比,虽然在excel中饼图也是显示百分比的,竟然都同时存在excel中,肯定各有千秋,下面小编就为大家介绍
百分比堆积柱形图是比较各个类别的每一数值所占总值的百分比,虽然在excel中饼图也是显示百分比的,竟然都同时存在excel中,肯定各有千秋,下面就为大家介绍
饼图显示数据和百分比的存在方法如下: MicrosoftExcel是Microsoft为使用Windows和AppleMacintosh操作系统的电脑编写的一