グラフを印刷しようとしていますが、FirefoxとChromeで正しく印刷されます。
しかし、IEで印刷しようとすると、グラフの背後にグラフキャンバスのHTMLタグが表示されます。あなたが画像で見たように。また、グラフ軸のテキストをグラフ全体に配置しました。:(
私はそれが問題を解決すると言う以下の解決策を試しましたが、それは私にとっては難しいです:(
問題のスクリーンショットの下。
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データ
{
"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コード
$('.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
}
});
}