Я ищу экспортировать настроенную диаграмму simliar на сообщение здесь Export Highcharts to PDF (using javascript and local server - no internet connection), что ссылки http://fiddle.jshell.net/leighking2/dct9tfvn/. У этого есть точная функциональность, которую я ищу, однако у меня есть диаграмма/данные в файле/контроллере sepearte. Кто-нибудь знает, как я мог бы взять концепцию из поста, указанного выше, но включить его в свой контроллер?Экспорт Highcharts в PDF с помощью AngularJS Controller
Не хотел включать весь мой файл 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>'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');
};
});Вопрос Update
Благодаря Vaelyr! Теперь у меня работает кнопка печати; однако у меня есть только добавление текста. У меня просто проблема с привязкой диаграммы к imageData. На данный момент у меня есть только сценарий на моей странице html, пока я не получу эту работу.
Прикрепление диаграмм к изображениюДата (через петлю) не работает для меня. У меня есть класс = "myCharts", прикрепленный к обоим моим диаграммам, но не повезло. Теперь я просто пытаюсь добавить свои диаграммы в 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');
};
Как только получить эти функции и внести их в директиву на своей странице. Попросите обработчик щелчка экспорта выполнить ссылочный код. На самом деле ничего не меняется. Идея по-прежнему заключается в том, чтобы найти все элементы диаграммы, превратить их в высокопроизводительные объекты и напечатать на созданном холсте. Логика не меняется. – Vaelyr