primefaces 图表浏览器挂起

Question

我想创建 68000 点的线形图。
实际上图表创建没有任何问题并且每秒动态更新一次。

这是示例 xhtml 文件：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:form id="statistics-form">
        <p:dialog header="Statistics"
                  id="statistics"
                  onHide="closeDialog('side-menu-form:sm-statistics');"
                  widgetVar="statistics"
                  width="700" height="auto"
                  showEffect="fade" hideEffect="fade"
                  resizable="false">
            <div class="dialog-content">
                <p:tabView>
                    <p:tab title="System">
                        <p:accordionPanel>
                            <p:tab title="Memory">
                                <h:panelGrid cellpadding="10">
                                    <p:poll interval="1"
                                            global="false"
                                            update="chartMemory"
                                            listener="#{memoryChartBean.init}"/>
                                    <p:chart type="line"
                                             model="#{memoryChartBean.lineModel}"
                                             id="chartMemory"
                                             style="height:210px;width:600px;"/>
                                </h:panelGrid>
                            </p:tab>
                            <p:tab title="Cpu">
                                <h:panelGrid cellpadding="10">
                                    <p:poll interval="1"
                                            global="false"
                                            update="chartCpu"
                                            listener="#{cpuChartBean.init}"/>
                                    <p:chart type="line"
                                             model="#{cpuChartBean.lineModel}"
                                             id="chartCpu"
                                             style="height:190px;width:600px;"/>

                                    <p:poll interval="1" global="false" update="chartLoadAvg"
                                            listener="#{loadAvgChartBean.init}"/>
                                    <p:chart type="line"
                                             model="#{loadAvgChartBean.lineModel}"
                                             widgetVar="chart"
                                             id="chartLoadAvg"
                                             style="height:190px;width:600px;"/>
                                </h:panelGrid>
                            </p:tab>
                        </p:accordionPanel>
                    </p:tab>
                </p:tabView>
            </div>
        </p:dialog>
    </h:form>

    <script type="text/javascript">
        function loadAvgChartExtender() {
            this.cfg.shadow = false;
            this.cfg.title = 'Load Average';
            this.cfg.seriesColors = ['#003eff', '#7d9800', '#5bab77'];
            this.cfg.grid = {
                background: '#ffffff',
                borderColor: '#ffffff',
                gridLineColor: '#e8e8e8',
                shadow: false
            };
            this.cfg.legend = {
                show: true,
                position: 'sw'
            };
            this.cfg.axesDefaults = {
                borderWidth: 0.1,
                borderColor: '#bdbdbd',
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    fontSize: '8pt'
                }
            };
            this.cfg.seriesDefaults = {
                shadow: false,
                lineWidth: 0.7,
                smooth: true,
                markerOptions: {
                    shadow: false,
                    size: 1
                }
            };
            this.cfg.series = [
                {
                    label: '1 minute'
                },
                {
                    label: '5 minute'
                },
                {
                    label: '15 minute'
                }
            ];
            this.cfg.axes = {
                yaxis: {
                    pad: 0,
                    min: 0,
                    numberTicks: 11,
                    tickOptions: {
                        formatString: "%d"
                    }
                },
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                    autoscale: true,
                    min: this.cfg.axes.xaxis.min,
                    max: this.cfg.axes.xaxis.max,
                    numberTicks: 24,
                    tickOptions: {
                        angle: 70,
                        showGridline: false,
                        formatString: '%H:%M:%S'
                    }
                }
            };


        }

        function cpuChartExtender() {
            this.cfg.shadow = false;
            this.cfg.title = 'CPU Statistics';
            this.cfg.seriesColors = ['#97cd96', '#000000', '#807990', '#003eff'];
            this.cfg.grid = {
                background: '#ffffff',
                borderColor: '#ffffff',
                gridLineColor: '#e8e8e8',
                shadow: false
            };
            this.cfg.legend = {
                show: true,
                position: 'sw'
            };
            this.cfg.axesDefaults = {
                borderWidth: 0.1,
                borderColor: '#bdbdbd',
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    fontSize: '8pt'
                }
            };
            this.cfg.seriesDefaults = {
                shadow: false,
                lineWidth: 0.3,
                smooth: true,
                markerOptions: {
                    shadow: false,
                    size: 1
                }
            };
            this.cfg.series = [
                {
                    fill: true,
                    label: 'User'
                },
                {
                    label: 'System'
                },
                {
                    label: 'Idle'
                }
            ];
            this.cfg.axes = {
                yaxis: {
                    pad: 0,
                    min: 0,
                    max: 100,
                    numberTicks: 11,
                    tickOptions: {
                        formatString: "%d"
                    }
                },
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                    autoscale: true,
                    min: this.cfg.axes.xaxis.min,
                    max: this.cfg.axes.xaxis.max,
                    numberTicks: 24,
                    tickOptions: {
                        angle: 70,
                        showGridline: false,
                        formatString: '%H:%M:%S'
                    }
                }
            }
        }

        function memoryChartExtender() {
            this.cfg.shadow = false;
            this.cfg.title = 'Memory and Swap Usage';
            this.cfg.seriesColors = ['#807990', '#ff9c59', '#ff9c59', '#000000'];
            this.cfg.grid = {
                background: '#ffffff',
                borderColor: '#ffffff',
                gridLineColor: '#e8e8e8',
                shadow: false
            };
            this.cfg.legend = {
                show: true,
                position: 'sw'
            };
            this.cfg.axesDefaults = {
                borderWidth: 0.1,
                borderColor: '#bdbdbd',
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    fontSize: '8pt'
                }
            };
            this.cfg.seriesDefaults = {
                shadow: false,
                lineWidth: 1,
                smooth: true,
                markerOptions: {
                    shadow: false,
                    size: 1
                }
            };
            this.cfg.series = [
                {
                    fill: true,
                    label: 'Memory Usage'
                },
                {
                    label: 'Swap Usage'
                }
            ];
            this.cfg.axes = {
                yaxis: {
                    min: 0,
                    max: this.cfg.axes.yaxis.max,
                    numberTicks: 10
                },
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                    autoscale: true,
                    min: this.cfg.axes.xaxis.min,
                    max: this.cfg.axes.xaxis.max,
                    numberTicks: 24,
                    tickOptions: {
                        angle: 70,
                        showGridline: false,
                        formatString: '%H:%M:%S'
                    }
                }
            }
        }
    </script>
</ui:composition>

我的问题是，当我在手风琴面板上更改选项卡时，浏览器将在大约 7 分钟后挂起。
我将这个点数与 echarts 或 highchart 进行比较，那个库没有这个问题但是 primefaces 使用 jqplot 而这个 javascript 库无法处理！（也许问题是另一回事）
（抱歉英语不好）
有什么问题？
如何解决这个问题？

Answer 1

尝试在轮询器进行 ajax 调用之前销毁它中的图表。

确保为您的图表提供 widgetVar，例如 widgetVar="chartCpuWidget"

 <p:poll interval="1"
         global="false"
         update="chartCpu"
         onstart="PF('chartCpuWidget').destroy();"
         listener="#{cpuChartBean.init}"/>

primefaces 图表浏览器挂起

primefaces chart browser hang

jsf

primefaces

jsf-2.2