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>
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
热门推荐
10 对患者生日祝福语简短
11 结婚祝福语简短装备
12 周岁祝福语学生文案简短
13 订婚领证祝福语简短精辟
14 导师获奖祝福语大全简短
15 新婚购房祝福语简短精辟
16 牛年祝福语简短的爱人
17 送芒果的祝福语简短
18 送给学长毕业祝福语简短