如何使用Highcharts将实体尺寸调整为父div的大小

Question

我已经使用Highcharts创建了一个实心量表。现在，我想将图表放入网格div内，该网格div的大小为300px或自动。当我尝试将代码放入div时，它在图表上需要大量空白，我尝试对其进行检查，这表明SVG图像占据了大部分空间。我不知道如何使图表适合div。我是HighCharts的新手，将不胜感激。

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<div id="container" style="height: 300px;">
</div>

$(function() {

  var rawData = 100,
    data = getData(rawData);

  function getData(rawData) {
    var data = [],
      start = Math.round(Math.floor(rawData / 10) * 10);
    data.push(rawData);
    for (i = start; i > 0; i -= 1) {
      data.push({
        y: i
      });
    }
    return data;
  }

  Highcharts.chart('container', {
    chart: {
      type: 'solidgauge',
      marginTop: 0
    },

    title: {
      text: ''
    },

    subtitle: {
      text: rawData,
      style: {
        'font-size': '60px'
      },
      y: 200,

    },

    tooltip: {
      enabled: false
    },

    pane: [{
      startAngle: -90,
      endAngle: 90,
      background: [{ // Track for Move
        outerRadius: '100%',
        innerRadius: '70%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.1).get(),
        borderWidth: 0,
        shape: 'arc'
      }],
      size: '100%',
      center: ['50%', '65%']
    }, {
      startAngle: -180,
      endAngle: 180,
      size: '95%',
      center: ['50%', '65%'],
      background: []
    }],

    yAxis: [{

      min: 0,
      max: 100,
      lineWidth: 0,
      lineColor: 'white',
      tickInterval: 0,
      labels: {
        enabled: true
      },
      minorTickWidth: 0,
      tickLength: 0,
      tickWidth: 0,
      tickColor: 'white',
      zIndex: 0,
      stops: [
        [0, '#fff'],
        [0.1, '#0f0'],
        [0.2, '#2d0'],
        [0.3, '#4b0'],
        [0.4, '#690'],
        [0.5, '#870'],
        [0.6, '#a50'],
        [0.7, '#c30'],
        [0.8, '#e10'],
        [0.9, '#f03'],
        [1, '#f06']
      ]
    }, {
      linkedTo: 0,
      pane: 0,
      lineWidth: 10,
      lineColor: 'white',
      tickPositions: [],
      zIndex: 6
    }],

    series: [{
      animation: false,
      dataLabels: {
        enabled: false
      },
      borderWidth: 0,
      color: Highcharts.getOptions().colors[0],
      radius: '100%',
      innerRadius: '70%',
      data: data
    }]
  });
});

Currently the image is coming this way.

http://jsfiddle.net/dt4wu39e/1/