Highcharts - ненужная проблема с пространством на графике p ie

Question

Я пытаюсь интегрировать диаграмму p ie в мою веб-страницу. Работает нормально, но есть дополнительное пространство сверху и снизу. Я не знаю, что эти пробелы не хочу У меня есть варианты в старшей диаграмме, чтобы удалить эти места? Или мы можем использовать 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, удаление которого приводит к полной диаграмме. Можете ли вы проверить, нужен ли этот класс, обновленная диаграмма с удаленным классом добавлена ​​во фрагмент.

Также у диаграммы p ie есть метки данных, контейнер также будет занимать место для отображения меток данных. , Если удалить метки данных и добавить размер 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
        }
      }
    }]
  }

Ширина> 300 -> устанавливает высоту диаграммы обратно в 400 (что установлено по умолчанию)

Ширина <300 -> устанавливает высоту диаграммы в 300 (пробелов нет)

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