<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
