删除 Highcharts 中极坐标条形图下方的空白区域

Question

我有一个在 Highcharts 中创建的极坐标图，其范围从 -90 到 90 度：

我假设它下面有一大片空白区域，因为容器仍然占据一个完整的圆，而不是半个圆。

如何删除此空白字段，以便 Highcharts 徽标和“此文本应位于图表正下方”字符串位于图表正下方？

我用这里的代码创建了一个 JS 小提琴：https://jsfiddle.net/1ujbmypx/2/，但我也会包含下面的代码：

HTML：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
<div>This text should be right underneath the graph.</div>

JavaScript：

Highcharts.chart("container", {

    chart: {
    type: "bar",
    polar: true
  },
  
  title: {
      text: undefined
  },
  
  pane: {
    startAngle: -90,
    endAngle: 90,
    size: "100%"
  },
  
  legend: {
    enabled: false
  },
 
  
  series: [{
    data: [
    {y: 30}, {y: 20}, {y: 25}
    ]
  }]

})

Answer 1

不确定这是否是最好的方法，但以下方法有效。

pane: {
    ...
    center: ['50%', '100%']

然后调整 CSS，将整个物体向上移动 50% 的高度。

#container {
  height: 500px;
  margin-top: -250px;
}

Highcharts.chart("container", {

    chart: {
    type: "bar",
    polar: true
  },
  
  title: {
      text: undefined
  },
  
  pane: {
    startAngle: -90,
    endAngle: 90,
    size: "90%",
    distance: 200,
    center: ['50%', '100%']
  },
  
  legend: {
    enabled: false
  },
 
  
  series: [{
    data: [
    {y: 30}, {y: 20}, {y: 25}
    ]
  }]

})

#container {
  height: 500px;
  margin-top: -250px;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
<div>This text should be right underneath the graph.</div>