Highcharts的饼图大小的控制
程序员文章站
2022-05-24 13:21:19
...
在Highcharts中，饼图的大小是Highcharts自动计算并进行绘制。饼图的大小受数据标签大小、数据标签到切片的距离影响。当数据标签内容较多，并且距离切片较远时，饼图就会被压缩的很小。解决这个问题，有以下几种方法：
（1）如果不需要特别强调数值大小，可以取消数据标签的显示。
（2）使用配置项distance为数据标签和切片的距离指定一个较小的值。甚至可以指定一个负值，让数据标签显示在切片的内部。
（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]
]
}]
数据图形展示页面，四个图形，上边俩，下边俩，客户机的分辨率不同，所以如果把图形的宽度高度写死，那么会造成屏幕显示不友好，抽空想了下，很简单
- 先让图形浮动，代码很简单：
- <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：
- $(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);
- });
- 这里出现一个问题，无法获取高度，原因是页面的头文件格式不对，改为如下即可：
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- 效果如下，改变窗体大小，图形跟着变换：