我正在使用jqPlot,并且想知道当有人更改窗口大小时是否可以调整大小/重绘它。我知道有一个重绘功能,但我不确定如何真正调用它...有人可以给我一些指示如何做到这一点吗?
这是我的代码:
$.jqplot('chart1', [line1], {
title:'Users Per Day',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
// tickInterval:'1 week',
tickOptions:{
formatString:'%b %#d, %y',
angle:-30
}
},
yaxis:{
tickOptions:{
formatString:'%.1f'
}
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: false
/*show: true,
zoom: true,
showTooltip: false */
}
});
'line1'是在此代码之前填充的数组,chart1是绘制图表的div。
有什么想法吗?
谢谢,
克雷格
答案 0 :(得分:8)
有关可调整大小图的此页面非常有用:http://www.jqplot.com/deploy/dist/examples/resizablePlot.html
这就是我解决你正在处理的项目的特定问题的方法(我只是以你的代码为例):
首先,将您的情节分配给变量:
plot = $.jqplot('chart1', [line1], {
title:'Users Per Day',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
// tickInterval:'1 week',
tickOptions:{
formatString:'%b %#d, %y',
angle:-30
}
},
yaxis:{
tickOptions:{
formatString:'%.1f'
}
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: false
/*show: true,
zoom: true,
showTooltip: false */
}
});
然后在您的页面上添加此功能:
$(window).resize(function() {
plot.replot( {resetAxes: true } );
});
使用resetAxes,它也会重新缩放轴(你可能会失去你可能设置的任何最小值/最大值)。有关重新制作的更多信息,请参阅此页面:http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.replot。
答案 1 :(得分:2)
我用过
var timer;
$(window).resize(function () {
clearTimeout(timer);
timer = setTimeout(function () {
plot.replot({});
}, 100);
});
所以它不会为每个像素保留重新绘制,而是在调整大小的末尾。
答案 2 :(得分:0)
通常jqplot图表占用图表div ID所包含的整个区域。因此,尝试找到一种方法来重新调整div的大小并重绘图表,在绘图对象上调用重绘。