<div id="container2" style="min-width: 320px;min-height: 380px;"></div>
$(function () {
$('#container2').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: '浏览器<br>占比',
align: 'center',
verticalAlign: 'middle',
y: 50 //标题高度
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
legend:{
symbolRadius:0, //设置图例的形状
symbolHeight:15, //设置图例宽高
symbolWeight:15, //设置图例宽高
itemStyle:{ //设置legend的字体颜色
color:'red',
fontWeight:'normal',
fontSize:'1.2rem'
},
y:-50, //设置图例y轴定位问题
margin:-100, //设置标题距离环顶部距离
itemDistance:10, //图例之间的间距
itemMarginTop:10 //图例距离饼图的距离
},
plotOptions: {
pie: {
size:500,//设置饼图固定的宽度
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -90, //设置扇形图的角度,去除就是饼图
endAngle: 90, //设置扇形图的角度,去除就是饼图
center: ['50%', '75%'],
showInLegend:true,
floating:false //设置图例是否浮动
}
},
series: [{
type: 'pie',
name: '浏览器占比',
innerSize: '50%', //设置饼图填充百分比
data: [
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
{
name: '其他',
y: 0.7,
dataLabels: {
// 数据比较少,没有空间显示数据标签,所以将其关闭
enabled: false
}
}
]
}]
});
});
Highcharts基础教程(七):图例(Legend)
https://www.e(删除)vget.com/article/2016/7/15/24503.html?23
https://www.h(删除)vcharts.cn/docs/pie-chart?45