Highcharts - 饼图中不必要的空间问题

Question

我正在尝试将饼图集成到我的网页中。它工作正常，但顶部和底部有额外的空间。我不知道那些空格。

如上图所述，顶部和底部有很多我不想要的空白。我在高图中有任何选项可以删除这些空间吗？或者我们可以使用 css 或其他任何东西吗？

下面是我正在处理的示例代码。

Highcharts.chart('jobs', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie',
            showLegend: false
        },
        title: {
            text: 'Parramatta'
        },
        subtitle: {
            text: 'Total: 12',
        },
        tooltip: {
            pointFormat: '{series.name} ({point.y}): <b>{point.percentage:.1f}%</b>'
        },
        exporting: {
            enabled: false,
        },
        plotOptions: {
            pie: {
                allowPointSelect: false,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    x: 0, y: 0,
                    format: '<b>{point.name} ({point.y}):</b><br />{point.percentage:.1f}%'
                },
                showInLegend: true,
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            
                        }
                    }
                }
            }
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Jobs',
            colorByPoint: true,
            data: [
                {
                name: 'No AFSS',
                y: 4,
                color: '#9933ff',
                },
                {
                name: 'Valid AFSS',
                y: 4,
                color: '#00b04f',
                },
                {
                name: 'Expired AFSS',
                y: 4,
                color: '#ff0000',
                }
            ]
        }]
    });

<link href="http://materialwrap-html.authenticgoods.co/assets/css/theme-a.css" rel="stylesheet"/>
<link href="http://materialwrap-html.authenticgoods.co/assets/css/app.bundle.css" rel="stylesheet"/>
<link href="http://materialwrap-html.authenticgoods.co/assets/css/vendor.bundle.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-3 col-sm-4 col-xs-4">
    <div class="panel panel-default">
      <div class="panel-body">
        <div id="jobs"></div>
      </div>
    </div>
  </div>
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

Answer 1

我在这里发现的问题与您的 col-xs-4 课程有关，删除它会使图表变大。你能检查一下这个类是否必要，删除了类的更新图表被添加到sn-p。

饼图也有数据标签，容器也会占用空间来显示数据标签。删除数据标签并添加大小 100% 将显示完整大小的图表

function renderChart(id) {
  Highcharts.chart(id, {
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie',
      showLegend: false,
      spacingTop: 0,
    },
    title: {
      text: 'Parramatta'
    },
    subtitle: {
      text: 'Total: 12',
    },
    tooltip: {
      pointFormat: '{series.name} ({point.y}): <b>{point.percentage:.1f}%</b>'
    },
    exporting: {
      enabled: false,
    },
    plotOptions: {
      pie: {
        allowPointSelect: false,
        cursor: 'pointer',
        size: '100%',
        dataLabels: {
          enabled: true,
          inside:true,
          distance:-55,
          format: '<b>{point.name} ({point.y}):</b><br />{point.percentage:.1f}%'
        },
        showInLegend: true,
        cursor: 'pointer',
        point: {
          events: {
            click: function() {

            }
          }
        }
      }
    },
    credits: {
      enabled: false
    },
    series: [{
      name: 'Jobs',
      colorByPoint: true,
      data: [{
          name: 'No AFSS',
          y: 4,
          color: '#9933ff',
        },
        {
          name: 'Valid AFSS',
          y: 4,
          color: '#00b04f',
        },
        {
          name: 'Expired AFSS',
          y: 4,
          color: '#ff0000',
        }
      ]
    }]
  });
}

window.addEventListener('DOMContentLoaded', (event) => {
  for (var i = 0; i < 4; i++) {
    renderChart(`jobs${i}`)
  }
});

<link href="http://materialwrap-html.authenticgoods.co/assets/css/theme-a.css" rel="stylesheet" />
<link href="http://materialwrap-html.authenticgoods.co/assets/css/app.bundle.css" rel="stylesheet" />
<link href="http://materialwrap-html.authenticgoods.co/assets/css/vendor.bundle.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-3 col-sm-4">
    <div class="panel panel-default">
      <div class="panel-body">
        <div id="jobs0"></div>
      </div>
    </div>
  </div>

  <div class="col-md-3 col-sm-4">
    <div class="panel panel-default">
      <div class="panel-body">
        <div id="jobs1"></div>
      </div>
    </div>
  </div>

  <div class="col-md-3 col-sm-4">
    <div class="panel panel-default">
      <div class="panel-body">
        <div id="jobs2"></div>
      </div>
    </div>
  </div>

  <div class="col-md-3 col-sm-4">
    <div class="panel panel-default">
      <div class="panel-body">
        <div id="jobs3"></div>
      </div>
    </div>
  </div>


</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

Answer 2

您可以使用响应式功能更改图表大小以缩小图表宽度。

演示：https://jsfiddle.net/BlackLabel/rhygLqok/

  responsive: {
    rules: [{
      condition: {
        maxWidth: 300
      },
      // Make the labels less space demanding on mobile
      chartOptions: {
        chart: {
          height: 300
        }
      }
    }, {
      condition: {
        minWidth: 300
      },
      chartOptions: {
        chart: {
          height: 400
        }
      }
    }]
  }

Width > 300 -> 将图表高度设置回 400（默认设置）

Width 将图表高度设置为 300（没有空格）

API：https://api.highcharts.com/highcharts/responsive