我正在使用Morris.js创建图表。我要求将图形导出为pdf。我可以看到图形是svg元素。我该怎么做才能实现这一目标。
答案 0 :(得分:5)
我拿了一个莫里斯样本,为你做了一个小提琴:
http://jsfiddle.net/1roLdqte/48/
我添加了一个简单的调用,只用morris图表格式化PDF现有的div:
$('#print').click(function () {
printMe();
});
function printMe() {
xepOnline.Formatter.Format('line-example',{render:'download', srctype:'svg'});
}
运行小提琴并按下PDF按钮。
请注意,此处提供了更多参数,您可以格式化更多内容,而不仅仅是morris.js图表,控制页面大小,添加页眉/页脚等。这仅将图表(srctype:' svg')格式化为PDF格式,作为矢量图像(不是光栅)。
答案 1 :(得分:0)
有效。我尝试了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错了。要解决此错误:“未捕获的TypeError:无法在xepOnline.jqPlugin.008.js:166上读取null的属性'长度',请更改xepOnline.jqPlugin.008.js中的代码。
在第166行添加。当“rules”为空时,这将跳过长度。
if(rules === null)
continue;
现在,xepOnline.jqPlugin.008.js中函数togglePrintMediaStyle中的代码:
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);
},