javascript 重绘 jqPlot
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9722964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Redrawing jqPlot
提问by craigtb
I am working with a jqPlot and was wondering if theres a way to resize/redraw it when someone changes the window size. I know there is a redraw function but im not sure how to really invoke it... Can someone give me some pointers on how to do this?
我正在使用 jqPlot 并且想知道当有人更改窗口大小时是否可以调整大小/重绘它。我知道有一个重绘函数，但我不确定如何真正调用它......有人可以给我一些关于如何做到这一点的指示吗？
Here is my code:
这是我的代码：
$.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' is an array thats populated right before this code and chart1 is the div where the chart is plotted.
'line1' 是在此代码之前填充的数组，chart1 是绘制图表的 div。
Any ideas?
有任何想法吗？
Thanks,
谢谢，
Craig
克雷格
回答by Trevor Owen
This page on resizable plots is helpful: http://www.jqplot.com/deploy/dist/examples/resizablePlot.html
这个关于可调整大小的图的页面很有帮助：http: //www.jqplot.com/deploy/dist/examples/resizablePlot.html
This is how I solved your particular problem for a project I'm working on (I'll just use your code as the example):
这就是我为我正在处理的项目解决您的特定问题的方式（我将仅以您的代码为例）：
First, assign your plot to a variable:
首先，将您的绘图分配给一个变量：
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 */
}
});
Then on your page add this function:
然后在您的页面上添加此功能：
$(window).resize(function() {
plot.replot( {resetAxes: true } );
});
With resetAxes there it will rescale the axes as well (you do lose any min/max you may have set though). See this page for more info on replot: http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.replot.
使用 resetAxes ，它也会重新调整轴的比例（尽管您确实会丢失您可能设置的任何最小值/最大值）。有关 replot 的更多信息，请参阅此页面：http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.replot 。
回答by Jimmy Segers
I used
我用了
var timer;
$(window).resize(function () {
clearTimeout(timer);
timer = setTimeout(function () {
plot.replot({});
}, 100);
});
so it doesn't keep replotting for every pixel, but rather at the end of the resize.
所以它不会为每个像素重新绘制，而是在调整大小结束时重新绘制。
回答by Shamitha Silva
Normally jqplot chart occupies the full area which the chart div ID holds. So try to find a way which re-size the div and redraw the chart calling redraw on plot object.
通常 jqplot 图表占据图表 div ID 所拥有的全部区域。因此，尝试找到一种方法来重新调整 div 的大小并重新绘制图表，在 plot 对象上调用 redraw。
