Как сохранить изображение графика на сервере с высокими чартами?
В старших графиках у вас есть встроенная кнопка для загрузки текущего графика (например, http://www.highcharts.com/demo/, эта кнопка: 
). Вы можете сохранить его в формате PNG, JPEG, PDF или SVG.
Я хотел бы создать ссылку, которая сохраняет изображение на сервере, а не загружать его. Как я мог это сделать?
Я полагаю, что я должен изменить exportChart функция в файле exporting.src.js. Это выглядит так (но я не знаю достаточно JavaScript, чтобы сделать это):
exportChart: function (options, chartOptions) {
var form,
chart = this,
svg = chart.getSVG(chartOptions);
// merge the options
options = merge(chart.options.exporting, options);
// create the form
form = createElement('form', {
method: 'post',
action: options.url
}, {
display: NONE
}, doc.body);
// add the values
each(['filename', 'type', 'width', 'svg'], function (name) {
createElement('input', {
type: HIDDEN,
name: name,
value: {
filename: options.filename || 'chart',
type: options.type,
width: options.width,
svg: svg
}[name]
}, null, form);
});
// submit
form.submit();
// clean up
discardElement(form);
},
4 ответа
Это может быть сделано очень легко с PhantomJS, Вы можете сделать Highchart составьте график и сохраните его в формате SVG, PNG, JPEG или PDF. Пример ниже представляет демо Highcharts диаграмма в SVG и PDF одновременно:
var system = require('system');
var page = require('webpage').create();
var fs = require('fs');
// load JS libraries
page.injectJs("js/jquery.min.js");
page.injectJs("js/highcharts/highcharts.js");
page.injectJs("js/highcharts/exporting.js");
// chart demo
var args = {
width: 600,
height: 500
};
var svg = page.evaluate(function(opt){
$('body').prepend('<div id="container"></div>');
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
width: opt.width,
height: opt.height
},
exporting: {
enabled: false
},
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
yAxis: {
title: {
text: 'Y-values'
}
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
},
series: {
enableMouseTracking: false,
shadow: false,
animation: false
}
},
series: [{
type: 'column',
name: 'Andrii',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'Fabian',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: 'Joan',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: 'white'
}
}, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Andrii',
y: 13,
color: '#4572A7'
}, {
name: 'Fabian',
y: 23,
color: '#AA4643'
}, {
name: 'Joan',
y: 19,
color: '#89A54E'
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
return chart.getSVG();
}, args);
// Saving SVG to a file
fs.write("demo.svg", svg);
// Saving diagram as PDF
page.render('demo.pdf');
phantom.exit();
Если вы сохраните код как demo.js тогда просто беги bin/phantomjs demo.js чтобы генерировать demo.svg а также demo.pdf
Я просто реализую это, используя метод Нобиты. Я создавал опрос, который показывал результаты пользователя в виде диаграммы, загружал изображение на мой сервер и затем отправлял электронное письмо с изображением в нем. Вот несколько вещей, на которые стоит обратить внимание.
Мне пришлось сделать несколько обновлений файла highcharts/exporting-server/index.php, которые следующие:
Я изменил каталог с "temp" на что-то другое и просто заметил, что он находится в 4 разных местах.
Мне пришлось изменить shell_exec(), добавив "-XX:MaxHeapSize=256m", потому что он выдавал ошибку:
$output = shell_exec("java -XX:MaxHeapSize=256m -jar ". BATIK_PATH ." $typeString -d $outfile $width /mypathhere/results/$tempName.svg");
Если вы хотите, чтобы он загрузил это изображение, вы можете оставить следующее в покое:
header("Content-Disposition: attachment; filename=$filename.$ext");
header("Content-Type: $type");
echo file_get_contents($outfile);
Но я изменил это, потому что я хотел отправить обратно путь к изображению, поэтому я удалил вышеупомянутое и заменил его на путь к изображению (обратите внимание, что я просто использую временное имя.):
echo "/mypathhere/results/$tempName.$ext";
Кроме того, этот файл удаляет файл SVG, а также новый файл, который вы сделали. Вам необходимо удалить код, который удаляет файл:
unlink($outfile);
И вы также можете удалить строку перед ним, если вы хотите сохранить файл SVG.
Не забудьте включить highcharts/js/modules/exporting.js
Затем в вашем JS вы можете сделать что-то вроде следующего:
var chart = new Highcharts.Chart();
var imageURL = '';
var svg = chart.getSVG();
var dataString = 'type=image/jpeg&filename=results&width=500&svg='+svg;
$.ajax({
type: 'POST',
data: dataString,
url: '/src/js/highcharts/exporting-server/',
async: false,
success: function(data){
imageURL = data;
}
});
URL, на который вы отправляете сообщение, является новой версией /exporting-server/index.php. Затем вы можете использовать imageURL, как вам нравится.
Я не делал этого раньше, но я верю, что вы хотите поиграть с index.php файл находится в exporting-server папка. По умолчанию Highcharts предоставляет (бесплатно) веб-сервис, но вы можете изменить его и создать свой собственный веб-сервис для экспорта или делать все, что вы хотите с диаграммой. Посмотрите на эти инструкции, которые можно найти здесь Модуль экспорта:
"Если вы хотите настроить этот веб-сервис на своем собственном сервере, файл index.php, который обрабатывает POST, поставляется в пакете загрузки в каталоге /exporting-server.
- Убедитесь, что PHP и Java установлены на вашем сервере.
- Загрузите файл index.php из каталога /exporting-server в пакете загрузки на свой сервер.
- В вашей программе FTP создайте каталог с именем temp в том же каталоге, что и index.php, и измените этот новый каталог на 777 (только для серверов Linux/Unix).
- Загрузите батик с http://xmlgraphics.apache.org/batik/. Найдите бинарный дистрибутив для вашей версии jre
- Загрузите batik-rasterizer.jar и весь каталог lib в папку на вашем веб-сервере. В опциях в верхней части файла index.php укажите путь к batik-rasterier.jar.
- В опциях диаграммы установите опцию exporting.url в соответствии с местоположением вашего файла PHP. "
Вы можете попробовать это
var chart = $('#yourchart').highcharts();
svg = chart.getSVG();
var base_image = new Image();
svg = "data:image/svg+xml,"+svg;
base_image.src = svg;
$('#mock').attr('src', svg);
Возьми html из Mock и отправь в БД или сохрани только двоичный код.