在Highcharts中，餅圖的大小是Highcharts自動計算并進行繪制。餅圖的大小受數(shù)據標簽大小、數(shù)據標簽到切片的距離影響。當數(shù)據標簽內容較多，并且距離切片較遠時，餅圖就會被壓縮的很小。解決這個問題，有以下幾種方法：
（1）如果不需要特別強調數(shù)值大小，可以取消數(shù)據標簽的顯示。
（2）使用配置項distance為數(shù)據標簽和切片的距離指定一個較小的值。甚至可以指定一個負值，讓數(shù)據標簽顯示在切片的內部。

（3）使用餅圖的配置項size強制設置餅圖的大小。

series: [{type: 'pie',size:'180%',innerSize: '80%',data: [['Firefox', 44.2],['IE7', 26.6],['IE6', 20],['Chrome', 3.1],['Other', 5.4]]}]

數(shù)據圖形展示頁面，四個圖形，上邊倆，下邊倆，客戶機的分辨率不同，所以如果把圖形的寬度高度寫死，那么會造成屏幕顯示不友好，抽空想了下，很簡單

• 先讓圖形浮動，代碼很簡單：

[html]?view plain?copy

<div>??

????<div?id="container1"?style="min-width:?600px;?min-height:?400px;?float:left"></div>??

????<div?id="container2"?style="min-width:?600px;?min-height:?400px;?float:left"></div>??

????<div?id="container3"?style="min-width:?600px;?min-height:?400px;?float:left"></div>??

????<div?id="container4"?style="min-width:?600px;?min-height:?400px;?float:left"></div>??

</div>??

• 使用jquery：

[javascript]?view plain?copy

$(window).resize(function()?{??

????var?width_frm?=?$(document.body).width();??

????var?height_frm?=?$(document.body).height();??

????????????var?width_div?=?width_frm/2;??

????var?height_div?=?height_frm/2;??

??????

????$('#container1').css("height",?height_div);??

????$('#container1').css("width",?width_div);??

??????

????$('#container2').css("height",?height_div);??

????$('#container2').css("width",?width_div);??

??????

????$('#container3').css("height",?height_div);??

????$('#container3').css("width",?width_div);??

??????

????$('#container4').css("height",?height_div);??

????$('#container4').css("width",?width_div);??

});??

• 這里出現(xiàn)一個問題，無法獲取高度，原因是頁面的頭文件格式不對，改為如下即可：

[html]?view plain?copy

<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">??

• 效果如下，改變窗體大小，圖形跟著變換：

總結

以上是生活随笔為你收集整理的Highcharts的饼图大小的控制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。