IE8 Проблемы с печатью с Jqplot
Я тестирую jqplot с IE8. Когда я пытался печатать, метки осей были смещены. Я использовал Canvashack Эндрю Баллока в качестве обходного пути.(Http://blog.muonlab.com/2010/06/02/getting-position-absolute-canvas-elements-to-print-correctly-in-ie/) Он все еще делал не решить проблему. Я новичок в написании сценариев. Что-то не так с моим кодом? Пожалуйста помоги.
Спасибо шу
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if IE]><script language="javascript" type="text/javascript" src="jqplot/dist/excanvas.min.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="jqplot/dist/jquery.jqplot.css" />
<!-- BEGIN: load jquery -->
<script language="javascript" type="text/javascript" src="jqplot/dist/jquery-1.3.2.min.js"></script>
<!-- END: load jquery -->
<!-- BEGIN: load jqplot -->
<script language="javascript" type="text/javascript" src="jqplot/dist/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplot/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/dist/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/dist/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<!-- END: load jqplot -->
<script language="javascript" type="text/javascript">
(function($) {
$.fn.CanvasHack = function() {
var canvases = this.find('canvas').filter(function() {
return $(this).css('position') == 'absolute';
});
canvases.wrap(function() {
var canvas = $(this);
var div = $('<div />').css({
position: 'absolute',
top: canvas.css('top'),
left: canvas.css('left')
});
canvas.css({
top: '0',
left: '0'
});
return div;
});
return this;
};
})(jQuery);
</script>
</head>
<body>
<div class="jqPlot" id="chart1" style="height:320px; width:540px;"></div>
<script language="javascript" type="text/javascript">
line1=[[1,1], [1.5, 2.25], [2,4], [2.5,6.25], [3,9], [3.5,12.25], [4,16]];
line2=[25, 12.5, 6.25, 3.125];
xticks = [[0, 'zero'], [1, 'one'], [2, 'two'], [3, 'three'], [4, 'four'], [5, 'five']];
yticks = [-5, 0, 5, 10, 15, 20, 25, 30];
plot4 = $.jqplot('chart4', [line1, line2], {
legend:{show:true},
title:'Customized Axes Ticks',
grid: {background:'#f3f3f3', gridLineColor:'#accf9b'},
series:[
{label:'Rising line', markerOptions:{style:'square'}},
{label:'Declining line'}
],
axes:{
xaxis:{rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
ticks:xticks, tickOptions:{angle: -30}
},
yaxis:{rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
ticks:yticks, tickOptions:{formatString:'%d', angle: -30}
}
}
});
$('body').CanvasHack();
</script>
</body>
</html>
3 ответа
Вам нужно использовать jQuery 1.4.2
Скачайте скрипт и замените ссылку на 1.3.2 на 1.4.2.
Также есть ошибка в вашем коде, ваш div называется "chart1", но ваш скрипт ссылается на "chart4".
Исправьте это и ваше пение:)
Решение, предоставленное Эндрю, не работает для меня. Вместо этого я должен был изменить excanvac.js в соответствии с комментариями следующих строк:
//var overlayEl = el.cloneNode(false);
// Use a non transparent background.
//overlayEl.style.backgroundColor = 'red';
//overlayEl.style.filter = 'alpha(opacity=0)';
//canvasElement.appendChild(overlayEl);
В моем файле excanvas.js (скачанном пару дней назад с jqplot) он находится на 596-600.
Надеюсь, это поможет кому-то, так что им не придется проходить через мучительный процесс, пытаясь понять это.
Этот ответ отлично сработал для меня! Мне пришлось объединить оба изменения кода excanvas.js, а затем интегрировать код, который был размещен здесь, где возник вопрос. Ниже я опубликую свой источник, который использует JQPlot и правильно работает в IE 7. Он размещен в SharePoint, следовательно, конверт SOAP, содержащий запрос CAML.
Вот основной макет:
- Функция, содержащая граф
- вызов к холсту исправить
- Конец функции, содержащей график
*Canvas Fix Функция
Ищите все восклицательные знаки.
<script language="javascript" src="/code_lib/excanvas.js" type="text/javascript"></script><script language="javascript" src="/code_lib/jquery-1.7.2.js" type="text/javascript"></script><script language="javascript" src="/code_lib/jquery.jqplot.min.js" type="text/javascript"></script><script language="javascript" src="/code_lib/plugins/jqplot.barRenderer.min.js" type="text/javascript"></script><script language="javascript" src="/code_lib/plugins/jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script><script language="javascript" src="/code_lib/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script><link href="/code_lib/jquery.jqplot.css" type="text/css" rel="stylesheet"/><script language="javascript" src="/code_lib/json2.js" type="text/javascript"></script><script language="javascript" src="/code_lib/jkl-parsexml.js" type="text/javascript"></script><script language="javascript" type="text/javascript">
$ (document).ready (function () {// Обязательные библиотеки: //jquery //jqplot - вместе со связанными плагинами //json2 // ПРИМЕЧАНИЕ Значения "FieldRef Name" - это имена столбцов, которые можно // извлечь из URL с помощью сортировка списка целей с помощью этих // столбцов в SharePoint
var soapEnv =
"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>Produce</listName> \
<ViewFields> \
<FieldRef Name='Quantity' /> \
<FieldRef Name='Quantity2' /> \
</ViewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";
$.ajax({
//Use an ABSOLUTE reference to your target webservice
url: "http://mydomain/Sandbox/bitest/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: processResult,
contentType: "text/xml; charset=\"utf-8\"",
async: false //HORRIBLE idea, but only way it works in SP
});
//BEGIN JQPLOT SECTION
//http://www.jqplot.com/
//Graph will render with below data
//NOTE REGARDING GRAPH DATA:
//All data input must be properly formatted JSON. Convert JScript array to
//JSON using json2.js library (JSONString = JSON.stringify(targetarray)).
//NEXT convery JSON string object to JSON array by using parse method:
//GraphArray = JSON.parse(JSONString) - use the string generated above.
//This new 'GraphArray' array can be passed into JQPlot as a chart series.
//json2.js library URL:
//https://github.com/douglascrockford/JSON-js/
//Regarding JSON Support in IE7: JSON stringify support does not exist
//hence the need to download and utilize the above library.
s1 = jsonArray;
s2 = jsonArray2;
// Clear the existing chart so that the data can be refreshed
// Other methods of doing this may be more efficient.
// RENAME THE TARGET DIV IF YOU REUSE THIS CODE!
// And remember to make the target div in the first place (see end of code)
jQuery('#chart1').empty();
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = ['Sum Quantity 1', 'Sum Quantity 2', 'Sum Quantity 3'];
var plot1 = $.jqplot('chart1', [s1, s2], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
seriesDefaults:{
//dataRenderer: barRenderer,
renderer:$.jqplot.BarRenderer,
rendererOptions: {fillToZero: true}
},
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
series:[
{label:'Sum Quantity 1'},
{label:'Sum Quantity 2'},
{label:'Sum Quantity 3'},
],
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
pad: 1.05,
tickOptions: {formatString: '$%d'}
}
}
});
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!----------------------
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!----------------------
//NOTE: This is the call to the print position fix
$('body').CanvasHack();
});
//This function is intended to "fix" the positioning of graphs on print
(function($) {
$.fn.CanvasHack = function() {
var canvases = this.find('canvas').filter(function() {
return $(this).css('position') == 'absolute';
});
canvases.wrap(function() {
var canvas = $(this);
var div = $('<div />').css({
position: 'absolute',
top: canvas.css('top'),
left: canvas.css('left')
});
canvas.css({
top: '0',
left: '0'
});
return div;
});
return this;
};
})(jQuery);
function processResult(xData, status) {
quantityOne = 0;
quantityTwo = 0;
quantityOneArray = [];
quantityTwoArray = [];
i=0;
//Utilize asmx webservice to return list as XML
//This routine can be modified to match the data structure
//of that XML file.
//The initial SOAP request returns the XML version of the list.
//Utilize the below structure to access ALL xml data from the list:
//{SITEURL}/_vti_bin/owssvr.dll?Cmd=Display&List={GUID}&XMLDATA=TRUE&Query=*
$(xData.responseXML).find("z\\:row").each(function() {
quantityOne += parseFloat($(this).attr("ows_Quantity"));
quantityTwo += parseFloat($(this).attr("ows_Quantity2"));
quantityOneArray[i] = parseFloat($(this).attr("ows_Quantity"));
quantityTwoArray[i] = parseFloat($(this).attr("ows_Quantity2"));
//JSON CONVERSION OCCURS BELOW
jsonString = JSON.stringify(quantityOneArray);
jsonString2 = JSON.stringify(quantityTwoArray);
jsonArray = JSON.parse(jsonString);
jsonArray2 = JSON.parse(jsonString2);
i++;
});
}</script>
<div class="jqplot-target" id="chart1" style="width: 400px; position: relative; height: 400px"></div>