Highchart在单个页面上下载多个图形 [英] Highchart Download Multiple graph on individual page

问题描述

在highchart导出中，当前我正在单页pdf中下载多个图形，但是我希望第一页上的第一张图和第二页上的第二张图(谈论pdf).

In highchart Export,currently i am downloading multiple graphs in single page pdf,but i want first graph on first page and second graph on second page(talking about pdf).

code is available in below jsfiddle link   

点击此处以获得jsfiddle

Click here for jsfiddle

推荐答案

这是您的相关答案，您只需要在角度代码中实现即可.

Here is your relevant answer, you just need to implement in your angular code.

注意:它不会在此处直接运行，因此您必须遵循 链接，因为jquery应该在文档加载时更加重要，请实施它 像这样.

Note: it will not run directly here, so you will have to follow the link because jquery should be rander on document load, implement it like that.

因此，请点击以下链接:工作小提琴

So, follow this link : Working Fiddle

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>');

<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>

这篇关于Highchart在单个页面上下载多个图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！