Графики Морриса Экспорт в PDF?

Question

Я использую Morris.js для создания графиков. У меня есть требование экспортировать графики в формате PDF. Я вижу, что графики являются элементами SVG. Что я должен сделать, чтобы достичь этого.

Answer 1

Я взял один из образцов Морриса и сделал для тебя скрипку:

http://jsfiddle.net/1roLdqte/48/

Я добавил простой вызов для форматирования в PDF существующего div с помощью только диаграммы Морриса:

$('#print').click(function () {
printMe();
});
function printMe() {
  xepOnline.Formatter.Format('line-example',{render:'download', srctype:'svg'});
 }

Запустите скрипку и нажмите кнопку PDF.

Обратите внимание, что здесь доступно гораздо больше параметров, вы можете отформатировать гораздо больше содержимого, чем просто диаграмма morris.js, контролировать размеры страниц, добавлять верхние и нижние колонтитулы и тому подобное. Это только форматирует только диаграмму (srctype:'svg') в PDF как векторное изображение (не растровое).

Answer 2

Оно работает. Я попробовал с morris.js v0.5.0 и Raphael 2.1.2.

Добавьте это туда, где у вас есть ваша диаграмма (например, ваш контроллер):

$scope.pdf = function(chartName){
    printMorris(chartName);
};

function printMorris(chartName) {
    xepOnline.Formatter.Format(chartName, {render:'download', srctype:'svg'});
}

xepOnline.jqPlugin.008.js не так. Чтобы устранить ошибку: "Uncaught TypeError: Невозможно прочитать свойство" length "с нулевым значением в xepOnline.jqPlugin.008.js:166", измените код в xepOnline.jqPlugin.008.js.

Добавьте это в строку 166. Это пропустит длину, когда "rules" равно нулю.

        if(rules === null)
            continue;

Теперь код в функции togglePrintMediaStyle в xepOnline.jqPlugin.008.js:

togglePrintMediaStyle: function() {
    if($('head style[data-xeponline-formatting]').length > 0) {
        $('head style[data-xeponline-formatting]').remove();
        return;
    }
    var printrules = [];
    for(var x=0;x<document.styleSheets.length;x++) { 
        var rules=document.styleSheets[x].cssRules;
        var rule=[];
        if(rules === null)
            continue;
        for(var x2=0;x2<rules.length;x2++) {

            if(rules[x2].media && rules[x2].media && (rules[x2].media[0] === 'print' || 
                rules[x2].media && rules[x2].media.mediaText === 'print')) {
                for(var x3=0;x3<rules[x2].cssRules.length; x3++) {
                    rule.push(rules[x2].cssRules[x3]);
                }
            }  else if (rules[x2].parentStyleSheet.media[0] && 
                    rules[x2].parentStyleSheet.media[0] === 'print' ||
                    (rules[x2].parentStyleSheet.media && 
                        rules[x2].parentStyleSheet.media.mediaText === 'print')) {
                rule.push(rules[x2]);
            }
        }
        for(var x2=0;x2<rule.length;x2++) {
            printrules.push(rule[x2].cssText);  
        }
    }

    // write print media styles to head
    var html = '\n<style type="text/css" data-xeponline-formatting="true">\n';
    for(var x=0; x<printrules.length; x++) {
        html+='.xeponline-container ' + printrules[x] + '\n';
    }
    html += '</style>\n';
    $('head').append(html);
},