当窗口大小缩小时,饼图的宽度会更新,但整个画布的高度不会更新,这会导致饼图上方和下方的空间很大。如何确保图形在调整大小后不会占用超过所需的空间?
演示:http://jsfiddle.net/remisture/xV8PM/167/
谢谢
$(function() {
$('#container').highcharts({
title: null,
marginLeft: 0,
marginRight: 0,
spacingLeft: 0,
spacingRight: 0,
chart: {
type: 'pie'
},
plotOptions: {
pie: {
size: '100%',
dataLabels: {
enabled: false
},
states: {
hover: {
enabled: false
}
}
}
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
});
});
#container {
outline: 1px solid red;
padding: 0;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
将容器放在包装<div>
内,将容器宽度设置为 100%,然后每当发生窗口调整大小事件时,您都必须重新绘制图表,
这是一个有效的演示:http://jsfiddle.net/xV8PM/172/
希望这有帮助!