使用AngularJS控制器将Highcharts导出为PDF

时间:2016-04-28 21:02:22

标签: javascript angularjs highcharts-ng

我希望将自定义图表同时导出到Export Highcharts to PDF (using javascript and local server - no internet connection)引用http://fiddle.jshell.net/leighking2/dct9tfvn/的帖子https://delphihaven.wordpress.com/2013/02/03/writing-a-simple-firemonkey-tlistlayout-implementation/。这具有我正在寻找的确切功能,但是我的图表/数据在sepearte文件/控制器中。有谁知道我如何从上面列出的帖子中获取概念,但是将它合并到我的控制器中?

我不想包含我的整个index.html文件,但这里有两个图表。



 <div id="allCharts" class="col-md-6" >
      <button class="export_all" >export all</button>
            <highchart id="chart1" config="chartConfig" class="span9 myChart" ></highchart>
                <hr>
            <highchart id="chart2" config="chartConfig2" class="span9 myChart" ></highchart>  
 </div>
&#13;
&#13;
&#13;

&#13;
&#13;
'use strict';

var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {
   
    $scope.chartConfig = {
        options: {
            chart: {
                type: 'line'
            },
            xAxis: {
          categories: ['Year 1', 'Year 2', 'Year 3', 'Year 4', 'Year 5'],
            title: {
                text: null
            }
      },

      plotOptions: {
          line: {
              events: {
                  legendItemClick: function () {
                      return false;
                  }
              }

          }, allowPointSelect: false,
        series: {
          stacking: ''
        }
      }
    },
    series: [{ "name": "Purchase Costs", data: $scope.purchaseChartData }, { "name": "Rental Costs", data: $scope.rentalChartData }],
    title: {
      text: 'Rental and Purchase Costs'
    },
    credits: {
      enabled: true
    },
    loading: false,
    size: {}
    };


    $scope.chartConfig2 = {
        options: {
            chart: {
                type: 'column'
            },
            xAxis: {
          categories: ['Year 1', 'Year 2', 'Year 3', 'Year 4', 'Year 5'],
          title: {
              text: null
          }
      },
      plotOptions: {

          column: {
              events: {
                  legendItemClick: function () {
                      return false;
                  }
              }

          }, allowPointSelect: false,
                series: {
                    stacking: ''
                }
            }
        },
        exporting:{
            allowHTML:true
        },
        series: [{ "name": "Annual Savings", data: $scope.savingsChartData }],
        title: {
            useHTML:false,
            text: 'Savings Compounded Annually'
        },
        credits: {
            enabled: true
        },
        loading: false,
        size: {}
    };

  $scope.reflow = function () {
    $scope.$broadcast('highchartsng.reflow');
  };


});
&#13;
&#13;
&#13;

  

问题更新

谢谢Vaelyr!我现在有打印按钮工作;但是我只添加了文字。我只是在将图表链接到imageData时遇到问题。现在我只是在我的html页面中有脚本,直到我开始工作。

将图表附加到imageData(通过循环)并不适合我。我有课=&#34; myCharts&#34;附在我的两张图表上,但没有运气。现在我只是试图将我的图表添加到imageData。

 <div id="allCharts" class="col-md-6" >
    <button class="exportAll" onClick="printPDF()" id="export_btn">export all</button>
   <highchart id="chart1" config="chartConfig" class="span9 myChart" ></highchart>
      <hr>
 <highchart id="chart2" config="chartConfig2" class="span9 myChart" ></highchart>  

      function printPDF() {
            var doc = new jsPDF();

            // chart height defined here so each chart can be palced
            // in a different position
            var chartHeight = 80;

            // All units are in the set measurement for the document
            // This can be changed to "pt" (points), "mm" (Default), "cm", "in"
            doc.setFontSize(40);
            doc.text(35, 25, "My Exported Charts");

            //loop through each chart
            $('.myChart').each(function (index) {
            var imageData = $(this).highcharts().createCanvas();


            // add image to doc, if you have lots of charts,
            // you will need to check if you have gone bigger 
            // than a page and do doc.addPage() before adding 
            // another image.

            /**
             * addImage(imagedata, type, x, y, width, height)
             */
            doc.addImage(imageData, 'JPEG', 45, (index * chartHeight) + 40, 120, chartHeight);
            //add.addImage();
    });


    //save with name
    doc.save('demo.pdf');
};

1 个答案:

答案 0 :(得分:0)

我找到了我在这里寻找的功能https://github.com/pablojim/highcharts-ng/issues/185

- moe