Highcharts半饼 - 删除馅饼和图例之间的空间

时间:2017-08-17 14:18:37

标签: javascript html css highcharts pie-chart

我在与Highcharts的semi circle donut聊天中挣扎。我试图减少甜甜圈底部与下面传说之间的差距,但没有成功。

以下是我正在处理的基本图表:

https://jsfiddle.net/vmw0pekL/2/

结果是:

enter image description here

这是没有那么多自定义的基本图形。我接下来尝试的是使用marginTopmarginBottom图表属性。我设法缩小了图表和图例之间的空间,但现在我在图表顶部有一个巨大的差距......结果如下:

https://jsfiddle.net/vmw0pekL/3/

结果是:

enter image description here

有人知道如何处理这个问题吗?我希望图表顶部没有空格,图表和图例之间没有空格。

2 个答案:

答案 0 :(得分:2)

半圆形圆环图下面有一个很大的空白间隙的原因是因为这个空间是为整个饼图的下半部分保留的(将startAngle更改为0,将endAngle更改为360以查看我的意思)。您可以通过为center数组设置新值并设置饼图的新size来更改它。

API参考:
http://api.highcharts.com/highcharts/plotOptions.pie.center

例:
https://jsfiddle.net/327uxkbt/

答案 1 :(得分:0)

这是一种简单的方法:

chart: {
    marginTop: 10,
    marginBottom: -150,
    marginLeft: -100,
    marginRight: -100
},

#container {
  border: 1px solid red;
  height: 240px;
  font-size: 8px;
  width: 370px;
}