Заметки WEB-разработчика

Полезные материалы для web-разработки

Получение png-картинки из графика Highcharts

Многие кодеры знают замечательный jquery-плагин для формирования графиков - Highcharts, который формирует согласно параметрам график в svg формате. Сам график можно скачать в формате jpg, png, svg и т.д. Но, что, если нам нужно получить снимок графика и сохранить его на свой сервер автоматически с целью дальнейшего использования (например, послать его на емейл)? Как нам получить доступ к картинке?

Получение png-картинки из графика Highcharts

Для этого нам понадобится  послать ajax-запрос на сервер Highcharts, который в свою очередь создаст растровую картинку из svg. Далее я приведу примеры кода из которого будет всё понятно.

var json_graf1 = {
   //настройки
};

// формируем график, с помощью плагина
$('.graf1-wrap').highcharts(json_graf1);
// получаем svg, который надо будет послать на сервер
var chart = $('.graf1-wrap').highcharts();
var mySvg = chart.getSVG();
getImgPath(mySvg);

/**
 * Получаем путь до картинки на сервере Highcharts
 * @param mySvg svg графика
 * @returns {boolean}
 */
function getImgPath(mySvg) {
    var url = 'http://export.highcharts.com';
    var typeOfImg = 'png';
    var mySvg = mySvg.replace(/zIndex="[^"]+"/g, "")
        .replace(/isShadow="[^"]+"/g, "")
        .replace(/symbolName="[^"]+"/g, "")
        .replace(/jQuery[0-9]+="[^"]+"/g, "")
        .replace(/url\([^#]+#/g, "url(#")
        .replace(/<svg /, '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ')
        .replace(/ href=/g, " xlink:href=").replace(/\n/, " ")
        .replace(/<\/svg>.*?$/, "</svg>").replace(/&nbsp;/g, "В ")
        .replace(/&shy;/g, "В­").replace(/<IMG /g, "<image ")
        .replace(/height=([^" ]+)/g, 'height="$1"')
        .replace(/width=([^" ]+)/g, 'width="$1"')
        .replace(/hc-svg-href="([^"]+)">/g, 'xlink:href="$1"/>')
        .replace(/id=([^" >]+)/g, 'id="$1"')
        .replace(/class=([^" >]+)/g, 'class="$1"')
        .replace(/ transform /g, " ")
        .replace(/:(path|rect)/g, "$1")
        .replace(/style="([^"]+)"/g, function (a) {return a.toLowerCase()})
    	.replace(/(url\(#highcharts-[0-9]+)&quot;/g, "$1").replace(/&quot;/g, "'");
        
    $.ajax({
        type: 'POST',
        data: {async: true, type: typeOfImg, svg: mySvg},
        cache: false,
        url: url,
        success: function (data) {
            // выволим в консоль путь до картинки
            console.log(url + '/' + data);
        }
    });
    return true;
}

Комментарии

Комментарии через Вконтакте