Highchart下载单个页面上的多个图表

Question

在highchart Export中，目前我正在单页pdf中下载多个图表，但我想要第一页上的第一个图表和第二页上的第二个图表（谈论pdf）。

code is available in below jsfiddle link   

点击here获取jsfiddle

Answer 1

以下是您的相关答案，您只需要在角度代码中实现。

  

注意：它不会直接在这里运行，所以你必须遵循   链接，因为jquery应该是文件加载的rander，实现它   像那样。

所以，请点击以下链接：Working Fiddle

＆＃13;

＆＃13;

Highcharts.getSVG = function(charts) {
  var svgArr = [],
    top = 0,
    width = 0;

  $.each(charts, function(i, chart) {
    var svg = chart.getSVG();
    svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" ');
    svg = svg.replace('</svg>', '</g>');

    top += chart.chartHeight;
    width = Math.max(width, chart.chartWidth);

    svgArr.push(svg);
  });

  return '<svg height="' + top + '" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
};

/**
 * Create a global exportCharts method that takes an array of charts as an argument,
 * and exporting options as the second argument
 */
Highcharts.exportCharts = function(charts, options) {
  var form
  svg = Highcharts.getSVG(charts);

  // merge the options
  options = Highcharts.merge(Highcharts.getOptions().exporting, options);

  // create the form
  form = Highcharts.createElement('form', {
    method: 'post',
    action: options.url
  }, {
    display: 'none'
  }, document.body);

  // add the values
  Highcharts.each(['filename', 'type', 'width', 'svg'], function(name) {
    Highcharts.createElement('input', {
      type: 'hidden',
      name: name,
      value: {
        filename: options.filename || 'chart',
        type: options.type,
        width: options.width,
        svg: svg
      }[name]
    }, null, form);
  });
  //console.log(svg); return;
  // submit
  form.submit();

  // clean up
  form.parentNode.removeChild(form);
};

var chart1 = new Highcharts.Chart({

  chart: {
    renderTo: 'container1'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]

});

var chart2 = new Highcharts.Chart({

  chart: {
    renderTo: 'container2',
    type: 'column'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: [{
    data: [176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0]
  }]

});



<!-- PDF, Postscript and XPS are set to download as Fiddle (and some browsers) will not embed them -->

var click = "return xepOnline.Formatter.Format('JSFiddle', {render:'download'})";
jQuery('#buttons').append('<button onclick="' + click + '">PDF</button>');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Script/xepOnline.jqPlugin.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="buttons"></div>
<hr/>
<div id="JSFiddle">
  <!-- Insert your document here -->
  <header style="display:none;margin-top:20px;">
    <p>Add your header</p>
  </header>
  <footer style="display:none">
    <p>Add your header</p>
  </footer>
  <div id="container1" style="height: 200px; width:700px"></div>
  <div style="page-break-before:always;">
    <div id="container2" style="height: 200px;  width:700px"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;