如何删除高图表中半圆下方的空间

Question

如您所见，半圆下方有一个巨大的空白空间。看来虽然我用startAngle=-90和endAngle=90画了一个半圆的馅饼，但它仍然画了一整圈，只是隐藏了下半部分。

这是代码：http：//jsfiddle.net/vv72ceug/17/

这是它的外观

Answer 1

即使您

设置了startAngle和endAngle，以便仅显示其中的一半，另一半的空间仍然保留。您可以通过重新定位图表的中心来实现所需的结果。

尝试将中心属性从 center: ['50%', '75%'] 更改为 center: ['50%', '90%'] 。这样，您可以将图表向下移动到页面中，这样您就不会在下面有空白区域。

看看这个JS小提琴。

Answer 2

将size参数设置为宽度值，然后删除间距。

示例：http://jsfiddle.net/vv72ceug/40/

Answer 3

我很欣赏大家的回答，但上述答案都无法完全删除图表下方的空白区域。

我找到了一个 css 技巧可以为您执行此操作。

想象一下，这是容器标记。

您需要应用以下 CSS 才能获得所需的内容：

div#container {margin-bottom: -45% !important;}
div#container > div {margin-bottom: -45% !important;}
div#container > div.highcharts-container > svg {margin-bottom: -45%; max-height: 50% !important;}

我希望这有帮助