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

tf7tbtn2 于 11个月前发布在 Highcharts

关注(0)|答案(1)|浏览(186)

我在Highcharts中创建了一个极坐标图，从-90度到90度：
x1c 0d1x的数据
在它下面有一大片空白，我假设是因为容器仍然占了一个完整的圆，而不是半圆。
我如何删除这个空白字段，以便Highcharts徽标和“This text should be right below the graph”字符串位于图表的正下方？
我用这里的代码创建了一个JS小提琴：https://jsfiddle.net/1ujbmypx/2/，但我也会包括下面的代码：
超文本标记语言：

<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}
    ]
  }]

})

型

highcharts

来源：https://stackoverflow.com/questions/77520550/remove-blank-space-underneath-polar-bar-chart-in-highcharts

1条答案

按热度按时间

doinxwow1#

我不知道这是否是最好的方法，但下面的工作。

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>

的一种或多种

赞(0）回复(0）举报 11个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答