javascript - 为什么我的雷达图 (HighCharts) 没有完全填充到其父容器的大小？

Question

HTML:

  <div id="screenshot-area">
    <div id="container"></div>
  </div>

CSS:

  #screenshot-area {
    max-width: 1160px;
    height: 588px;
  }
  #container {
    width: 100%;
    height: 100%;
  }

JS:

  Highcharts.chart('container', {
    title: {
      text: null
    },
    legend: {
      enabled: false
    },
    tooltip: {
      pointFormat: '{point.y}'
    },
    chart: {
      type: 'line',
      polar: true,
      spacingTop: 0
    },
    credits: {
      enabled: false
    },
    xAxis: {
      categories: ["目力","攻撃力","防御力","覇気"],
      tickmarkPlacement: 'on',
      lineWidth: 0
    },
    yAxis: {
      gridLineInterpolation: 'polygon',
      lineWidth: 0,
      min: 0
    },
    series: [{
      data: [9,6,5,1]
    }]
  })

您可以在此处查看结果:http://output.jsbin.com/guzisekezu

图表没有占据其父级的完整尺寸，即#screenshot-area，它们之间有很多空间。

Answer 1

要操纵极坐标图的大小，请使用 pane 对象中的 size 属性。

API 引用:
http://api.highcharts.com/highcharts/pane.size

例子:
http://jsfiddle.net/vLfvnw6n/