Highcharts的饼图大小的控制

在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
<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);  
});  

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

[html]view plain copy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  

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

Highcharts的饼图大小的控制

猜你喜欢