打印时，图表未以A4格式填充所有页面。 （最高图表）

Question

图表似乎被切掉了，我不知道必须更改哪些参数才能呈现A4格式。同样在左上角，该图表剪切了打印日期。你能帮我吗？

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

要以不同于屏幕显示的宽度打印图表，您必须使用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

Answer 2

最后，我找到了解决方案。我将此参数设置为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;
  }

}