<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