Highcharts打印格式问题

Question

我正在尝试打印此图表（请参阅下面的jsfiddle中的代码）。有很多系列，当打印图表时，所有系列都在图表之上。有没有办法避免这种情况？还是更好的方法呢？我试图添加更多的margin-bottom，但这会影响我拥有的其他许多图表。有没有添加margin-bottom的解决方案？谢谢！

Highcharts.setOptions({
  global: {
    useUTC: false
  },
  exporting: {
    buttons: {
      contextButton: {
        menuItems: [{
          text: 'PRINT CHART',
          onclick: function() {
            this.print();
          }
        }]
      }
    }
  }
});
Highcharts.chart('basicLineEnvironmentGD', {
  chart: {
    type: '',
    events: {
      load: function() {
        var label = this.renderer.label("")
          .css({
            width: '600px',
            fontSize: '1em',
            color: '#414042'
          })
          .attr({
            'stroke': 'silver',
            'stroke-width': 0,
            'r': 2,
            'padding': 5
          })
          .add();
        label.align(Highcharts.extend(label.getBBox(), {
          align: 'center',
          x: 20,
          verticalAlign: 'bottom',
          y: 0
        }), null, 'spacingBox');
      }
    },
    marginBottom: 160
  },
  title: {
    text: 'Decoupled Growth Levels and Environmental Impact - index (1991 =1)',
    style: {
      fontSize: '2.5em'
    }
  },
  tooltip: {
    enabled: false
  },
  subtitle: {
    text: 'CEPI Statistics - Status as of 2015'
  },
  yAxis: {
    title: {
      text: ''
    }
  },
  xAxis: {
    categories: [
      1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015
    ]
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  legend: {
    align: 'center',
    verticalAlign: 'bottom',
    y: -55
  },
  series: [{
    color: '#8cc640',
    name: 'Production of Market Pulp and Paper',
    data: [
      1.00, 1.03, 1.06, 1.08, 1.17, 1.19, 1.17, 1.27, 1.30, 1.34, 1.41, 1.38, 1.42, 1.50, 1.56, 1.57, 1.63, 1.63, 1.57, 1.40, 1.52, 1.50, 1.48, 1.47, 1.46, 1.46,
    ]
  }, {
    color: '#26b6cc',
    name: 'Total Primary Energy Consumption',
    data: [
      1.00, 0.98, 0.96, 0.97, 0.94, 0.95, 0.97, 0.93, 0.91, 0.90, 0.87, 0.88, 0.89, 0.88, 0.87, 0.84, 0.86, 0.85, 0.84, 0.87, 0.87, 0.83, 0.82, 0.81, 0.79, 0.80,
    ]
  }, {
    color: '#009347',
    name: 'Biomass Utilisation',
    data: [
      1.00, 0.98, 0.96, 1.00, 0.98, 0.99, 0.98, 0.98, 0.98, 0.99, 0.97, 0.98, 1.00, 0.99, 0.98, 0.96, 0.98, 0.99, 1.00, 1.05, 1.03, 1.03, 1.05, 1.05, 1.01, 1.04,
    ]
  }, {
    color: '#005eb8',
    name: 'Electricity Consumption',
    data: [
      1.00, 0.96, 0.95, 0.96, 0.92, 0.93, 0.94, 0.92, 0.92, 0.90, 0.90, 0.89, 0.87, 0.85, 0.83, 0.86, 0.84, 0.84, 0.84, 0.85, 0.86, 0.83, 0.81, 0.80, 0.79, 0.79,
    ]
  }, {
    color: '#6cbd56',
    name: 'CO2',
    data: [
      1.00, 0.95, 0.94, 0.91, 0.89, 0.88, 0.91, 0.83, 0.81, 0.79, 0.75, 0.75, 0.74, 0.73, 0.68, 0.68, 0.65, 0.63, 0.63, 0.64, 0.62, 0.60, 0.58, 0.57, 0.54, 0.54,
    ]
  }, {
    color: '#AEADB3',
    name: 'NOX',
    data: [
      1.00, 1.00, 0.96, 0.94, 0.89, 0.85, 0.84, 0.79, 0.74, 0.73, 0.69, 0.70, 0.71, 0.71, 0.69, 0.64, 0.66, 0.63, 0.63, 0.66, 0.65, 0.65, 0.60, 0.61, 0.56, 0.56,
    ]
  }, {
    color: '#2f7cba',
    name: 'Water Intake',
    data: [
      1.00, 0.93, 0.89, 0.83, 0.77, 0.75, 0.73, 0.68, 0.65, 0.64, 0.60, 0.62, 0.61, 0.61, 0.63, 0.55, 0.55, 0.56, 0.55, 0.58, 0.54, 0.55, 0.56, 0.54, 0.54, 0.54,
    ]
  }, {
    color: '#51a332',
    name: 'COD',
    data: [
      1.00, 0.88, 0.73, 0.63, 0.55, 0.53, 0.48, 0.44, 0.40, 0.35, 0.34, 0.33, 0.31, 0.30, 0.28, 0.25, 0.25, 0.24, 0.23, 0.24, 0.24, 0.23, 0.23, 0.22, 0.21, 0.21,
    ]
  }, {
    color: '#87868A',
    name: 'SO2',
    data: [
      1.00, 0.82, 0.74, 0.63, 0.55, 0.49, 0.46, 0.40, 0.34, 0.29, 0.25, 0.25, 0.24, 0.21, 0.19, 0.20, 0.21, 0.19, 0.17, 0.17, 0.15, 0.13, 0.11, 0.12, 0.09, 0.10,
    ]
  }, {
    color: '#00a0b0',
    name: 'BOD',
    data: [
      1.00, 0.88, 0.74, 0.66, 0.55, 0.54, 0.46, 0.44, 0.40, 0.36, 0.32, 0.31, 0.30, 0.27, 0.24, 0.20, 0.19, 0.18, 0.17, 0.17, 0.17, 0.17, 0.16, 0.16, 0.15, 0.14,
    ]
  }, {
    color: '#6aa242',
    name: 'AOX',
    data: [
      1.00, 0.75, 0.47, 0.29, 0.20, 0.16, 0.12, 0.11, 0.10, 0.09, 0.08, 0.08, 0.08, 0.08, 0.06, 0.05, 0.06, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.04, 0.04, 0.04,
    ]
  }],
  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }
});

<div class="mtGraph" id="basicLineEnvironmentGD"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

Answer 1

您可以将alignColumns设置为false。

  

如果布局是水平的并且图例项跨越两行或更多行，则是否将项目对齐到垂直列。将此设置为false可为更多项目腾出空间，但看起来会更加混乱。

设置如下：

legend: {
  alignColumns: false,
  ...
},

工作示例： https://jsfiddle.net/ewolden/dt9qqhqg/