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
  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
  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
  1. >  
  • 效果如下,改变窗体大小,图形跟着变换:
Highcharts的饼图大小的控制_第1张图片

你可能感兴趣的:(前端插件)