我希望将自定义图表同时导出到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;
'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;
问题更新
谢谢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');
};