Я хочу создать линейную диаграмму с точкой 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, что в библиотеках нет этой проблемы, но простые символы используют jqplot, и эта библиотека javascript не может справиться с этим! (может быть, проблема в другом)
(извините за плохой английский)
В чем проблема?
Как это можно исправить?