重新绘制jqPlot
Redrawing jqPlot
我正在处理一个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。
有什么想法吗?
谢谢,
Craig
这个关于可调整大小的绘图的页面很有用: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,它也会重新缩放轴(但您确实会丢失您可能设置的任何最小值/最大值)。有关replot的更多信息,请参阅此页面:http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.replot.
我使用
var timer;
$(window).resize(function () {
clearTimeout(timer);
timer = setTimeout(function () {
plot.replot({});
}, 100);
});
因此,它不会一直为每个像素重新调整,而是在调整大小的末尾。
通常jqplot图表会占据图表div ID所在的整个区域。因此,试着找到一种方法来重新调整div的大小,并在plot对象上调用redraw来重新绘制图表。
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 有没有一个javascript图形绘制库可以进行气球树布局
- 使用相同的数据集绘制各种符号
- 使用onclick绘制SVG路径
- 在谷歌地图上绘制位置数据库
- 用chart.js绘制条形图
- “可绘制地图”设置地图选项“纬度-经度”
- 跟踪jqplot垂直折线图的鼠标位置
- 多维数据集网格未在指定的分区中绘制
- 使用谷歌图表在x轴上绘制日期
- 使用fabric.js从矩形区域获取对象,并将该区域绘制到画布上
- 如何在React Native中绘制图形
- 如何将Jqplot绘制到HTML画布中
- 使用 Jqplot 绘制图形和来自 Sqlite 数据库的数据
- 重新绘制jqPlot
- 根据json数据绘制jqplot图
- 如何在JQPlot条形图中绘制十进制值
- Jqplot:绘制系列
- 如何使用jQPlot在yaxis=0处绘制一条线
- 如何绘制javascript数组到jqplot