Highcharts的饼图大小的控制

最新推荐文章于 2024-06-23 07:11:34 发布

原创最新推荐文章于 2024-06-23 07:11:34 发布 · 1.6w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#size

前端插件专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何解决Highcharts饼图因数据标签导致的压缩问题，包括隐藏标签、调整标签距离和设定饼图尺寸等方法。同时，通过示例展示了如何使用jQuery使饼图自适应不同分辨率。

在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">  

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