在 Highcharts 饼图中,如何在调整窗口大小时保持高度同步



当窗口大小缩小时,饼图的宽度会更新,但整个画布的高度不会更新,这会导致饼图上方和下方的空间很大。如何确保图形在调整大小后不会占用超过所需的空间?

演示: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/

希望这有帮助!

最新更新