Question

如何将$ testChart-> html（）的ID设置为导出为PDF？因为我一次要导出多个图表。

谢谢。

$(document).ready(function() {
  // create canvas function from highcharts example http://jsfiddle.net/highcharts/PDnmQ/
  (function(H) {
    H.Chart.prototype.createCanvas = function(divId) {
      var svg = this.getSVG(),
        width = parseInt(svg.match(/width="([0-9]+)"/)[
          1]),
        height = parseInt(svg.match(/height="([0-9]+)"/)[1]),
        canvas = document.createElement('canvas');

      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);

      if (canvas.getContext && canvas.getContext('2d')) {

        canvg(canvas, svg);

        return canvas.toDataURL("image/jpeg");

      } 
      else {
        alert("Your browser doesn't support this feature, please use a modern browser");
        return false;
      }

    }
  }(Highcharts));

  $('#export_all').click(function() {
    var doc = new jsPDF();
    var chartHeight = 80;
    doc.setFontSize(40);
    doc.text(35, 25, "My Exported Charts");
    $('.myChart').each(function(index) {
      var imageData = $(this).highcharts().createCanvas();
      doc.addImage(imageData, 'JPEG', 45, (index * chartHeight) + 40, 120, chartHeight);
    });

    doc.save('demo.pdf');
  });


  //charts
  $('#chart1').highcharts({
    navigation: {
      buttonOptions: {
        enabled: false
      }
    },
    title: {
      text: 'Monthly Average Temperature',
      x: -20 //center
    },
    subtitle: {
      text: 'Source: WorldClimate.com',
      x: -20
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
      ]
    },
    yAxis: {
      title: {
        text: 'Temperature (°C)'
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },
    tooltip: {
      valueSuffix: '°C'
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    series: [{
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }, {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]
  });


});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Place favicon.ico`enter code here` and apple-touch-icon.png in the root directory -->
  <script src="js/jquery.js"></script>
  <script src="js/highchart.js"></script>
  <script src="js/exporting.js"></script>
  <script src="js/jspdf.js"></script>
  <script src="js/rgbcolor.js"></script>
  <script src="js/canvg.js"></script>

  <script type="text/javascript">
  </script>
</head>

<body>
  <button id="export_all">export all</button>
  <div id="chart1" class="myChart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  <div>{!! $testChart->html() !!} </div>

  {!! Charts::scripts() !!} {!! $tesChart->script() !!}`{!! $testChart->script() !!}`
</body>

</html>

如何将highchart导出为PDF

0 个答案: