在IE上打印JQplot的问题 [英] Print issue with JQplot on IE
问题描述
我尝试打印我的图形，并通过Firefox和Chrome正确打印。
但是如果我尝试用IE打印它，图表后面的HTML标记。如在图像中看到的。 （
我试过下面的解决方案，说它解决了问题，但它dint为我：（
用于我们网站中的HTML5支持。并优化代码，而不是采取整个mordernizr文件。我们创建了一个自定义Mordernizr文件。
这是wat问题，我们忘了包括PRINTSHIV复选框从那里，thats wat拧了它：）
很好，这是工作和解决这个问题的链接。
这被暂停了很长时间。刚刚得到它解决昨天，很高兴。
还要感谢BORO的回答，这有助于不要使用Mordernizr。
I am trying to print my graph and it prints properly through Firefox and Chrome.
But if i try to print it with IE, it shows me the graph canvas HTML tags behind the graph. as u seen in the image. and also it placed the graph axis text all over the graph.. :(
i tried the below solution which says it resolves the issue but it dint for me :(
below screenshot of the issue.
HTML
<!doctype html>
<html lang="en" class="no-js master">
<head>
<!-- jQuery Flot Graph Widget. exCanvas.js needed for IE -->
<link class="include" rel="stylesheet" type="text/css" href="/css/jquery.jqplot.css" />
<!-- End additional plugins --><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/js/excanvas.min.js"></script><![endif]-->
<script class="include" type="text/javascript" src="/js/jquery.jqplot.min.js"></script>
<!-- Additional plugins go here -->
<script class="include" type="text/javascript" src="/js/jqplot/jqplot.canvasTextRenderer.min.js"></script>
<script class="include" type="text/javascript" src="/js/jqplot/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script class="include" type="text/javascript" src="/js/jqplot/jqplot.canvasAxisTickRenderer.min.js"></script>
<script class="include" type="text/javascript" src="/js/jqplot/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" type="text/javascript" src="/js/jqplot/jqplot.barRenderer.min.js"></script>
</head>
<body>
<div id="mainCont"> </div>
</body>
</html>
JSON Data
{
"graphData":[["06-2011",20.0],["07-2011",0.0],["09-2011",0.0],["10-2011",0.0],["11-2011",100.0],["12-2011",0.0],["01-2012",0.0],["02-2012",0.0],["03-2012",0.0],["04-2012",0.0],["05-2012",0.0]], "yAxisLabel" : "Data per month", "graphTitle" : "12 month "}
JS code
$('.print', context).live("click", function(e) {
printGraph(data.graphData, data.yAxisLabel, data.graphTitle);
}
function printGraph(graphData, yAxisLabel, graphTitle){
var graphWrapper = $(document.createElement('div'));
graphWrapper.attr('id', 'edd-graph').css('width','490px');
var graphID = graphWrapper.attr('id');
$('#mainCont').append(graphWrapper);
var plot = $.jqplot(graphID, [graphData], {
series:[{renderer:$.jqplot.BarRenderer}],
seriesDefaults: {shadow: false,
rendererOptions: {barWidth:20}
},
seriesColors: [ "rgba(255, 81, 82, 1)" ],
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
label: '',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
max:90,
min:10,
tickOptions: {
angle: -45,
fontFamily: 'arial',
fontSize: '7.2pt'
}
},
yaxis: {
label: yAxisLabel,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions: {
fontFamily: 'arial',
fontSize: '8.5pt'
},
tickOptions: {
fontFamily: 'arial',
fontSize: '7.2pt'
}
}
},
grid: {
drawGridLines: true, // wether to draw lines across the grid or not.
gridLineColor: '#efefef', // *Color of the grid lines.
background: '#ffffff', // CSS color spec for background color of grid.
borderColor: '#999999', // CSS color spec for border around grid.
borderWidth: 0.2, // pixel width of border around grid.
shadow: false
}
});
}
Well we were using a Mordernizr for the HTML5 support in our site. and to optimize the code instead of taking the entire mordernizr file. We created a custom Mordernizr file.
That is wat where the issue was, we forgot to include the PRINTSHIV checkbox from there, thats wat screwed it up :)
well this is the link which worked and resolved this issue.
This was on hold for a long time. Just got it resolved yesterday and am so Glad.
Also like to thank BORO for his answer, that works to incase u dont user Mordernizr.
CUSTOM MORDERNIZR which worked
这篇关于在IE上打印JQplot的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
