График не заполняет всю страницу в формате А4 при печати.(Highcharts)

Question

Диаграмма, похоже, вырезана, и я не знаю, какие параметры мне нужно изменить, чтобы отобразить формат А4.Также в верхнем левом углу эта диаграмма обрезает дату печати.Не могли бы вы помочь мне?

exporting: {
  chartOptions: {
    legend: {
      align: "center",
      alignColumns: false,
      enabled: true,
      floating: false,
      itemDistance: 10,
      itemMarginTop: 0,
      itemMarginBottom: 0,
      maxHeight: 80,
      verticalAlign: 'bottom',
      symbolPadding: 3,
      symbolHeight: 8,
      symbolWidth: 8,
      symbolRadius: 6,
      y: 20,
      itemStyle: {
        fontSize: 8
      },
      navigation: {
        style: {
           arrowSize: 8,
           fontSize: 8
         }
      },
   },
},

Answer 1

Наконец-то я нашел решение. Я установил эти параметры в файл CSS. И это работает.

@page {
  size: A4;
  margin-top: 9mm;
  margin-bottom: 8mm;
  margin-left: 7mm;
  margin-right: 7mm;  
}
@media print {
  body {
      width: 780px;
      overflow: hidden;
  }
  #container {
      max-width: 780px;
  }

}

Answer 2

Чтобы распечатать диаграмму с шириной, отличной от отображаемой на экране, вы должны использовать событие beforePrint, чтобы изменить его, и событие afterPrint, чтобы сбросить его обратно. Проверьте код и демоверсию, размещенную ниже.

Html

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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>

<div id="container"></div>

JS:

Highcharts.chart('container', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie',
    borderWidth: 1,
    events: {
      beforePrint: function() {
        this.oldhasUserSize = this.hasUserSize;
        this.resetParams = [this.chartWidth, this.chartHeight, false];
        this.setSize(1200, 400, false);
      },
      afterPrint: function() {
        this.setSize.apply(this, this.resetParams);
        this.hasUserSize = this.oldhasUserSize;
      }
    }
  },
  title: {
    text: 'Browser market shares in January, 2018'
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: false
      },
      showInLegend: true
    }
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
      name: 'Chrome',
      y: 61.41,
      sliced: true,
      selected: true
    }, {
      name: 'Internet Explorer',
      y: 11.84
    }, {
      name: 'Firefox',
      y: 10.85
    }, {
      name: 'Edge',
      y: 4.67
    }, {
      name: 'Safari',
      y: 4.18
    }, {
      name: 'Other',
      y: 7.05
    }]
  }]
});

Демо:
https://jsfiddle.net/BlackLabel/qktbunLs/

Справочник по API:
https://api.highcharts.com/highcharts/chart.events.beforePrint
https://api.highcharts.com/highcharts/chart.events.afterPrint