Во время выполнения может возникнуть много проблем при локальном экспорте диаграмм с высокими диаграммами в изображение. Плохое разрешение, изображение генерируется с помощью небольшого фрагмента диаграммы, пользовательский график не экспортируется должным образом … и многое другое.
Включите в свой код следующий код (сохраните его в виде файла или включите в него тег сценария) и выберите метод, который наилучшим образом соответствует вашим потребностям.
Примечание. Данный код предполагает, что вы уже связали в своем документе jQuery (необязательно, вы можете изменить селекторы с помощью чистых селекторов javascript) и Highcharts_export.js (требуется для 2 из указанных методов), которые можно загрузить Вот. Этот код предназначен для того, чтобы помочь вам создать изображение с помощью старшей диаграммы или встроенного svg для изображения, что означает, что вы можете изменять или делиться кодом по своему усмотрению.
/**
* Highcharts exportation functions
* @author Our Code World
*/
(function(window){
function ExportInitializator(){
var exp = {};
var EXPORT_WIDTH = 1000; // Exportation width
/**
* This method requires the highcharts_export.js file
*/
exp.highchartsSVGtoImage = function(chart,callback) {
var svg = chart.highcharts().getSVG();
var canvas = document.createElement('canvas');
canvas.width = chart.width();
canvas.height = chart.height();
var ctx = canvas.getContext('2d');
var img = document.createElement('img');
img.onload = function() {
ctx.drawImage(img, 0, 0);
callback(canvas.toDataURL('image/png'));
};
img.setAttribute('src', 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg))));
};
/**
* This method requires the highcharts_export.js file
*/
exp.highchartsCustomSVGtoImage = function(chart,callback){
if(!chart){
console.error("No chart given ");
}
var render_width = EXPORT_WIDTH;
var render_height = render_width * chart.chartHeight / chart.chartWidth;
var svg = chart.getSVG({
exporting: {
sourceWidth: chart.chartWidth,
sourceHeight: chart.chartHeight
}
});
var canvas = document.createElement('canvas');
canvas.height = render_height;
canvas.width = render_width;
var image = new Image();
image.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)));
console.log(image);
image.addEventListener('load', function() {
console.log(chart);
canvas.getContext('2d').drawImage(this, 0, 0, render_width, render_height);
callback(canvas.toDataURL('image/png'));
}, false);
image.src = 'data:image/svg+xml;base64,' + window.btoa(svg);
};
/**
* This method requires the highcharts_export.js file
*/
exp.nativeSVGtoImage = function(DOMObject,callback,format){
if(!DOMObject.nodeName){
throw new error("Se requiere un objeto DOM de tipo SVG. Obtener con document.getElementById o un selector de jQuery $(contenedor).find('svg')[0]");
}
var svgData = new XMLSerializer().serializeToString(DOMObject);
var canvas = document.createElement("canvas");
canvas.width = $(DOMObject).width();
canvas.height = $(DOMObject).height();
var ctx = canvas.getContext( "2d" );
var img = document.createElement("img");
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData))) );
img.onload = function() {
ctx.drawImage( img, 0, 0 );
if(format === "jpeg" || format === "jpg"){
callback(canvas.toDataURL("image/jpeg"));
}else{
callback(canvas.toDataURL("image/png"));
}
};
return true;
};
return exp;
}
if(typeof(highchartsExport) === 'undefined'){
window.highchartsExport = new ExportInitializator();
}
})(window);
highchartsSVGtoImage
Этот метод ожидает jQuery-селектор старших диаграмм (или переменную, которая содержит верхнюю диаграмму) и вызывает из нее метод getSVG. Изображение будет создано, и его источником будет предыдущий результат SVG, затем будет создан холст, и на нем будет нарисовано предыдущее изображение, и мы можем сгенерировать изображение base64 из холста. (размеры этого изображения такие же, как у контейнера svg)
Замечания : Эта функция не является синхронной, поэтому 2-й параметр должен быть функцией (которая получает в качестве первого параметра base64 uri).
использование
highchartsExport.highchartsSVGtoImage($("#myChartContainer"),function(uri){
window.open(uri);
});highchartsCustomSVGtoImage
Этот метод ожидает jQuery-селектор старших диаграмм, вызывающих функцию, а затем вызывает из нее метод getSVG. Изображение будет создано, и его источником будет предыдущий результат SVG, затем будет создан холст, и на нем будет нарисовано предыдущее изображение, и мы можем сгенерировать изображение base64 из холста. (Ширина этого изображения будет результатом Пользовательское свойство «EXPORT_WIDTH» объявлено в верхней части скрипта, и будет выполнена следующая операция: render_width * chart.chartHeight / chart.chartWidth)
Замечания : Эта функция не является синхронной, поэтому 2-й параметр должен быть функцией (которая получает в качестве первого параметра base64 uri).
использование
highchartsExport.highchartsCustomSVGtoImage($("#myChartContainer").highcharts(),function(uri){
window.open(uri);
});nativeSVGtoImage
Этот метод ожидает родной объект SVG dom. Изображение создается, и его источником будет предыдущий результат SVG (который будет интерпретирован XMLSerializer), затем создается холст, и на нем рисуется предыдущее изображение, и мы можем сгенерировать изображение base64 из холста.
Замечания : Эта функция не является синхронной, поэтому 2-й параметр должен быть функцией (которая получает в качестве первого параметра base64 uri).
использование
highchartsExport.nativeSVGtoImage($("#myChartContainer").find("svg")[0],function(uri){
window.open(uri);
},'png');У вас есть больше способов экспортировать хай-чарты локально? Поделитесь этим с нами в поле для комментариев здесь.
