Question

我一直试图从HighCharts 半圈甜甜圈中删除边距和填充。

我已尝试使用margin: [0,0,0,0]和所有不同的四个间距属性。我还尝试将plotOptions的size属性设置为100％。

我已经创建了一个jsfiddle http://jsfiddle.net/W7bXw/1/来演示问题以及我尝试过的选项。正如您所看到的那样，半圆和容器之间仍然存在巨大的填充物。

有趣的是，将边距或间距设置为0适用于HighCharts的常规馅饼。

更新：

根据接受的答案，此图表的解决方案是使用负边距和容器的明确高度。

Answer 1

这可以帮助您：http://api.highcharts.com/highcharts - http://api.highcharts.com/highcharts#chart.margin 在这里，您可以找到如何使图表的填充更小，或0。添加此图表脚本并根据需要更改值以适合您的页面

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

的更新： 的检查一下：http://jsfiddle.net/W7bXw/2/

您必须为div #container设置宽度，然后设置边距。

Answer 2

我认为这是你期望的事情

 series: [{
        pointPadding: 0,
         groupPadding: 0,
        type: 'pie',
        size: '100%',
        name: 'Browser share',
        innerSize: '150%',
        data: [
            ['Firefox',   45.0],
            ['IE',       26.8],
            ['Chrome', 12.8],
            ['Safari',    8.5],
            ['Opera',     6.2],
            ['Others',   0.7]
        ]
    }]

将innerSize更改为150％并尝试

Answer 3

以下选项适用于我

在图表选项中，将图表向上移动负顶部和底部边距。

chart: {
   marginTop: -50,
   marginBottom: -50,
   marginLeft: 0,
   marginRight: 0,
}

在绘图选项中，大小应为size: '100%'。

plotOptions: {
    pie: {
       dataLabels: {
          enabled: true,                    
            style: {
               fontWeight: 'bold',
               color: 'black',
           }
        },
        size: '100%',
        startAngle: -90,
        endAngle: 90,
        center: ['50%', '75%']
    }
 },

HighCharts Semi-Circle-Donut，删除边距和填充

3 个答案: