Highcharts的饼图大小的控制

柔光的暖阳◎ 2021-09-15 07:38 1329阅读 0赞

在Highcharts中，饼图的大小是Highcharts自动计算并进行绘制。饼图的大小受数据标签大小、数据标签到切片的距离影响。当数据标签内容较多，并且距离切片较远时，饼图就会被压缩的很小。解决这个问题，有以下几种方法：  
（1）如果不需要特别强调数值大小，可以取消数据标签的显示。  
（2）使用配置项distance为数据标签和切片的距离指定一个较小的值。甚至可以指定一个负值，让数据标签显示在切片的内部。

（3）使用饼图的配置项size强制设置饼图的大小。

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

数据图形展示页面，四个图形，上边俩，下边俩，客户机的分辨率不同，所以如果把图形的宽度高度写死，那么会造成屏幕显示不友好，抽空想了下，很简单

*  先让图形浮动，代码很简单：

**\[html\]**  [view plain][]  [copy][view plain]

1.  <div>  
2.      <div id="container1" style="min-width: 600px; min-height: 400px; float:left"></div>  
3.      <div id="container2" style="min-width: 600px; min-height: 400px; float:left"></div>  
4.      <div id="container3" style="min-width: 600px; min-height: 400px; float:left"></div>  
5.      <div id="container4" style="min-width: 600px; min-height: 400px; float:left"></div>  
6.  </div>

*  使用jquery：

**\[javascript\]**  [view plain][]  [copy][view plain]

1.  $(window).resize(function() \{  
2.      var width\_frm = $(document.body).width();  
3.      var height\_frm = $(document.body).height();  
4.              var width\_div = width\_frm/2;  
5.      var height\_div = height\_frm/2;  
6.        
7.      $('\#container1').css("height", height\_div);  
8.      $('\#container1').css("width", width\_div);  
9.        
10.     $('\#container2').css("height", height\_div);  
11.     $('\#container2').css("width", width\_div);  
12.       
13.     $('\#container3').css("height", height\_div);  
14.     $('\#container3').css("width", width\_div);  
15.       
16.     $('\#container4').css("height", height\_div);  
17.     $('\#container4').css("width", width\_div);  
18. \});

*  这里出现一个问题，无法获取高度，原因是页面的头文件格式不对，改为如下即可：

**\[html\]**  [view plain][]  [copy][view plain]

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

*  效果如下，改变窗体大小，图形跟着变换：

![SouthEast][]

[view plain]: https://blog.csdn.net/yueritian/article/details/30777351#
[SouthEast]: /images/20210813/4f9e468d49fc4c298f297bf8a89ac5e9.png