Jquery Jqplot的IE8打印问题
我正在用IE8测试jqplot。当我试图打印时,轴标签偏移了。我用安德鲁·布洛克的拉票技巧作为解决办法。()它仍然没有解决这个问题。我不熟悉脚本编写。我的代码有什么问题吗?请帮忙 谢谢, 蜀Jquery Jqplot的IE8打印问题,jquery,printing,internet-explorer-8,jqplot,Jquery,Printing,Internet Explorer 8,Jqplot,我正在用IE8测试jqplot。当我试图打印时,轴标签偏移了。我用安德鲁·布洛克的拉票技巧作为解决办法。()它仍然没有解决这个问题。我不熟悉脚本编写。我的代码有什么问题吗?请帮忙 谢谢, 蜀 (函数($){ $.fn.CanvasHack=函数(){ var canvases=this.find('canvas').filter(函数(){ 返回$(this.css('position')='absolute'; }); canvases.wrap(函数(){ var canvas=$(此值)
(函数($){
$.fn.CanvasHack=函数(){
var canvases=this.find('canvas').filter(函数(){
返回$(this.css('position')='absolute';
});
canvases.wrap(函数(){
var canvas=$(此值);
var div=$('').css({
位置:'绝对',
top:canvas.css('top'),
左:canvas.css('left')
});
canvas.css({
顶部:“0”,
左:“0”
});
返回div;
});
归还这个;
};
})(jQuery);
第1行=[[1,1]、[1.5,2.25]、[2,4]、[2.5,6.25]、[3,9]、[3.5,12.25]、[4,16];
第2行=[25,12.5,6.25,3.125];
xticks=[[0',0'],[1',1'],[2',2'],[3',3'],[4',4'],[5',5'];
yticks=[-5,0,5,10,15,20,25,30];
plot4=$.jqplot('chart4',[line1,line2]{
图例:{show:true},
标题:“自定义轴标记”,
网格:{背景:'#f3',网格线颜色:'#accf9b'},
系列:[
{标签:'Rising line',标记选项:{样式:'square'}},
{标签:'下降线'}
],
轴线:{
xaxis:{rendererOptions:{tickdrenderer:$.jqplot.canvasaxisdickdrenderer},
滴答声:xticks,滴答声选项:{angle:-30}
},
yaxis:{rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
滴答声:yticks,滴答声选项:{formatString:'%d',angle:-30}
}
}
});
$('body').CanvasHack();
您需要使用
下载脚本并将指向1.3.2的链接替换为1.4.2
代码中还有一个bug,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代码更改和发布问题的地方的代码结合起来。我将在下面发布我的源代码,它在IE7中正确使用了JQPlot和函数。这是在SharePoint中托管的,因此是包含CAML查询的SOAP信封 以下是基本布局:
- 含函数图
- 调用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">
$(文档).ready(函数(){
//所需图书馆:
//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>
var soapEnv=
" \
\
\
产生\
\
\
\
\
\
\
";
$.ajax({
//使用对目标Web服务的绝对引用
url:“http://mydomain/Sandbox/bitest/_vti_bin/lists.asmx",
类型:“POST”,
数据类型:“xml”,
数据:soapEnv,
完成:processResult,
contentType:“text/xml;字符集=\“utf-8\”,
async:false//这个想法很糟糕,但它在SP中工作的唯一方式是
});
//开始JQPLOT部分
//http://www.jqplot.com/
//图形将使用以下数据进行渲染
//关于图形数据的注释:
//所有数据输入必须正确格式化JSON。将JScript数组转换为
//使用json2.js库(JSONString=JSON.stringify(targetarray))的JSON。
//使用parse方法将下一个JSON字符串对象转换为JSON数组:
//GraphArray=JSON.parse(JSONString)——使用上面生成的字符串。
//这个新的“GraphArray”数组可以作为图表系列传递到JQPlot中。
//json2.js库URL:
//https://github.com/douglascrockford/JSON-js/
//关于IE7中的JSON支持:JSON stringify支持不存在
//因此,需要下载并使用上述库。
s1=jsonArray;
s2=jsonArray2;
//清除现有图表,以便刷新数据
//其他方法可能更有效。
//如果重用此代码,请重命名目标DIV!
//并记住首先创建目标div(参见代码末尾)
jQuery('#chart1').empty();
//可以指定自定义记号数组。
//刻度应与序列中每个y值(类别)对应一个刻度。
var ticks=['数量总和1','数量总和2','数量总和3'];
变量plot1=$.jqplot('chart1',[s1,s2]{
//“seriesDefaults”选项是一个选项对象,它将
//适用于图表中的所有系列。
系列默认值:{
//dataRenderer:Ballenderer,
渲染器:$.jqplot.blunderer,
渲染器选项:{fillToZero:true}
},
//使用“标签”指定系列的自定义标签
//选项。这里是一个系列选项对象
//为每个系列指定。
系列:[
{标签:'Sum Quantity 1'},
{标签:'Sum Quantity 2'},
{标签:'Sum Quantity 3'},
],
//显示图例并将其放在网格外,但放在
//打印容器,缩小网格以容纳图例。
//值“outside”不会收缩网格并允许
//图例将溢出容器。
图例:{
秀:没错,
位置:“外部网格”
},
轴线:{
//在x轴上使用类别轴并使用我们的自定义标记。
xaxis:{
渲染器:$.jqplot.CategoryAxisRenderer,
滴答声:滴答声
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>