jqplot 实用技巧——重绘

chenglaoshi

于 2012-09-18 08:46:31 发布

阅读量193

点赞数

分类专栏： Web前端 jqplot chart 文章标签： javascript chart jqplot jquery UI ViewUI

Web前端同时被 3 个专栏收录

24 篇文章

订阅专栏

jqplot

5 篇文章

订阅专栏

chart

4 篇文章

订阅专栏

本文介绍了在不同场景下实现图表动态更新的方法，包括浏览器窗口大小变化时的图表适配、数据变动后的图表重绘、轴刻度调整及条形图尺寸更新等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

技巧一：
当浏览器窗体大小改变时：


$('#resizable1').bind('resize', function(event, ui) {
    plot1.replot( { resetAxes: true } );
});

技巧二：
重新加载数据进行重绘时：


chartObj.series[0].data = [[0, 4], [1, 7], [2, 3]];
chartObj.replot();

技巧三：
改变plot的ticks：


plot.axes.yaxis.reset();
plot.axes.yaxis.ticks = new_yticks;
plot.replot();

技巧四：
浏览器窗体大小变更后指定图表大小：


$('#resizable2').bind('resizestop', function(event, ui) {
    $('#chart2').height($('#resizable2').height()*0.96);
    $('#chart2').width($('#resizable2').width()*0.96);
    plot2.replot({resetAxes:true});
});

技巧四：
浏览器窗体大小变更后重置BarChart图表的bar（柱子）大小：


$.each(plot.series, function(index, series) {
    series.barWidth = undefined;
});

plot.replot({
    resetAxes : true
});