Javascript highcharts 饼图显示数量和百分比实例代码
Javascripthighcharts饼图显示数量和百分比实例代码
最近公司项目需求有这样一个功能模块,highcharts饼图显示数量和百分比,由于本人刚入门,看到这个需求不会写,于是就上网搜下相关资料,觉得一篇还不错记录下。
<divclass="piecleft"id="chart"style="height:350px;width:350px;"> </div> <scripttype="text/javascript"charset="utf-8"> varchart; $(document).ready(function(){ chart=newHighcharts.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)returnthis.point.name; }, color:'white', style:{ font:'13pxTrebuchetMS,Verdana,sans-serif' } } } }, legend:{ backgroundColor:'#FFFFFF', x:0, y:-30 }, credits:{ enabled:false }, series:[{ type:'pie', name:'Browsershare', data:[ ['1.1',3617], ['1.2.1',3436], ['1.0',416], ['1.3',2], ['1.2',1], ['新增对比',5000] ] }] }); }); </script>
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!