Как сохранить изображение графика на сервере с highcharts?

Это можно сделать очень просто с помощью 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.

Я просто реализую это, используя метод Nobita. Я создавал опрос, который показывал результаты пользователя в диаграмме, загружал изображение на свой сервер, а затем отправлял электронное письмо с изображением. Вот несколько замечаний.

Мне пришлось внести несколько обновлений в файл 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.

1. Убедитесь, что на вашем сервере установлены PHP и Java.
2. Загрузите файл index.php из каталога /exporting-server в пакете загрузки на свой сервер.
3. В вашей FTP-программе создайте каталог с именем temp в том же каталоге, что и index.php, и измените этот новый каталог на 777 (только для серверов Linux/Unix).
4. Загрузите батик с http://xmlgraphics.apache.org/batik/#download. Найдите бинарный дистрибутив для вашей версии jre
5. Загрузите файл batik-rasterizer.jar и весь каталог lib на свой веб-сервер. В опциях вверху файла index.php укажите путь к batik-rasterier.jar.
6. В параметрах диаграммы установите параметр 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 и отправьте в БД или сохраните только двоичный код.

Сохранить highchart как бинарное изображение