如何在缩放时暂时停止刷新Primefaces折线图

时间:2017-06-16 12:10:32

标签: jsf primefaces

我正在使用JSF / Primefaces p:chart来显示动态折线图,该图表根据实时数据通过p:poll标签定期更新(例如间隔为3秒),并且zoom属性设置为真正。现在,问题是我希望图表在我缩放时暂时停止更新并在双击以重置缩放时恢复。但是,更新的图表总是覆盖我正在观看的缩放图表。如何配置图表以使其在缩放时停止刷新?

1 个答案:

答案 0 :(得分:1)

我已经解决了这个问题,事实证明Zoom和ResetZoom都有事件,所以我可以将javascript函数绑定到这些事件,以便停止并启动p:poll。

让我分享我的解决方案,如下面的代码片段。

的index.xhtml

<h:form id="dashboardForm">
    <p:poll interval="3" update="chart"  process="@this"  global="false"  ignoreAutoUpdate="true" widgetVar="chartpoll"/>
    <p:chart id="chart" type="line" model="#{chartView.zoomModel}" style="height:300px;" widgetVar="chart" responsive="true"/>
</h:form>
<script type="text/javascript">
function lineChartExtender() {
    $('#dashboardForm\\:chart').bind('jqplotZoom', function(ev, gridpos, datapos, plot, cursor){
        PF('chartpoll').stop();
    });
    $('#dashboardForm\\:chart').bind('jqplotResetZoom', function(ev, gridpos, datapos, plot, cursor){
        PF('chartpoll').start();
    });
}
</script>

ChartView.java

LineChartModel model = new LineChartModel();
model.setZoom(true);
model.setExtender("lineChartExtender");