p:chart 柱形图系列未同步
p:chart bar's ChartSeries not synchronized
我一直在研究 PrimeFaces 条形图模型,现在它让我很紧张,我只是无法理解它的设置图表系列 values.What 预期结果应该是 One Open for say abc一个为 xyz 关闭,但是它显示一个打开和一个为 xyz 关闭,ABC 被忽略。如果我改变
的位置
barModel.addSeries(close);
barModel.addSeries(open);
到
barModel.addSeries(open);
barModel.addSeries(close);
然后显示一开一闭,只有abc,没有xyz。
首先是我的 getBarModel(),
public BarChartModel getBarModel() {
barModel=new BarChartModel();
ChartSeries open = new ChartSeries();
open.setLabel("OPEN");
ChartSeries close = new ChartSeries();
close.setLabel("Close");
open.set("abc", 1);
close.set("xyz", 1);
barModel.addSeries(close);
barModel.addSeries(open);
barModel.setMouseoverHighlight(false);
barModel.setShowPointLabels(false);
barModel.setTitle("Incident_application");
barModel.setLegendPosition("ne");
barModel.setShowDatatip(false);
barModel.setShowPointLabels(true);
barModel.setExtender("chartExtender");
barModel.setSeriesColors("A2CC39,1B75BA");
Axis xAxis = barModel.getAxis(AxisType.X);
xAxis.setLabel("Applications");
barModel.setAnimate(true);
Axis yAxis = barModel.getAxis(AxisType.Y);
yAxis.setLabel("No. of Incident");
yAxis.setMin(0);
yAxis.setMax(20);
yAxis.setTickInterval("10");
return barModel;
}
这里是 xhtml
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />
<style type="text/css">
table.jqplot-table-legend {
border: none;
font-size: x-large;
}
div.jqplot-table-legend-swatch
{
width: 2vw;
height: 2vh;
}
div.jqplot-gridData{
display:none;
}
div.jqplot-xaxis-tick{
font-weight:bold !important;
}
.jqplot-axis.jqplot-xaxis{
font-weight:bold;
}
.jqplot-point-label {
font-size: 300%;
color: black;
font-weight: bold;
}
.jqplot-target{
color:black !important;
}
</style>
<script>
function chartExtender() {
this.cfg.grid = {
background: 'transparent',
gridLineColor: '#303030',
drawBorder: false,
};
}
</script>
<h:form id="barChart">
<p:chart id="bar" type="bar" model="#{incidentBarChartController.barModel}" />
<p:poll interval="10" global="false" update="barChart"/>
</h:form>
</h:body>
下面添加了预期和实际结果的快照。
编辑
添加后
open.set("abc", 1);
open.set("xyz",0);
close.set("xyz", 1);
close.set("abc", 0);
我仍然得到奇怪的结果,即
xyz 1 开 1 关,xyz 0 开 0 关。
唯一的解决办法是,作为开发人员,您要确保所有系列都包含所有键并填充您没有的键,并确保所有系列中的所有键都以相同的顺序排列。
这样做的原因是只有您知道真正的顺序(这就是为什么在系列中使用 LinkedHashMap
)。 jQplot 或 PrimeFaces 无法知道这一点。如果例如第一个系列缺少一个键,该系列用作 'primary' 进行迭代,缺少的键将放在哪里。如果例如在位置 6,两者都有一把不在另一组中的钥匙,应该先拿哪一个? jqPlot 或 PrimeFaces 无法知道。作为开发人员的所有原因都应该通过将所有键放在所有系列中来确保它是明确的。
我一直在研究 PrimeFaces 条形图模型,现在它让我很紧张,我只是无法理解它的设置图表系列 values.What 预期结果应该是 One Open for say abc一个为 xyz 关闭,但是它显示一个打开和一个为 xyz 关闭,ABC 被忽略。如果我改变
的位置barModel.addSeries(close);
barModel.addSeries(open);
到
barModel.addSeries(open);
barModel.addSeries(close);
然后显示一开一闭,只有abc,没有xyz。
首先是我的 getBarModel(),
public BarChartModel getBarModel() {
barModel=new BarChartModel();
ChartSeries open = new ChartSeries();
open.setLabel("OPEN");
ChartSeries close = new ChartSeries();
close.setLabel("Close");
open.set("abc", 1);
close.set("xyz", 1);
barModel.addSeries(close);
barModel.addSeries(open);
barModel.setMouseoverHighlight(false);
barModel.setShowPointLabels(false);
barModel.setTitle("Incident_application");
barModel.setLegendPosition("ne");
barModel.setShowDatatip(false);
barModel.setShowPointLabels(true);
barModel.setExtender("chartExtender");
barModel.setSeriesColors("A2CC39,1B75BA");
Axis xAxis = barModel.getAxis(AxisType.X);
xAxis.setLabel("Applications");
barModel.setAnimate(true);
Axis yAxis = barModel.getAxis(AxisType.Y);
yAxis.setLabel("No. of Incident");
yAxis.setMin(0);
yAxis.setMax(20);
yAxis.setTickInterval("10");
return barModel;
}
这里是 xhtml
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />
<style type="text/css">
table.jqplot-table-legend {
border: none;
font-size: x-large;
}
div.jqplot-table-legend-swatch
{
width: 2vw;
height: 2vh;
}
div.jqplot-gridData{
display:none;
}
div.jqplot-xaxis-tick{
font-weight:bold !important;
}
.jqplot-axis.jqplot-xaxis{
font-weight:bold;
}
.jqplot-point-label {
font-size: 300%;
color: black;
font-weight: bold;
}
.jqplot-target{
color:black !important;
}
</style>
<script>
function chartExtender() {
this.cfg.grid = {
background: 'transparent',
gridLineColor: '#303030',
drawBorder: false,
};
}
</script>
<h:form id="barChart">
<p:chart id="bar" type="bar" model="#{incidentBarChartController.barModel}" />
<p:poll interval="10" global="false" update="barChart"/>
</h:form>
</h:body>
下面添加了预期和实际结果的快照。
编辑 添加后
open.set("abc", 1);
open.set("xyz",0);
close.set("xyz", 1);
close.set("abc", 0);
我仍然得到奇怪的结果,即 xyz 1 开 1 关,xyz 0 开 0 关。
唯一的解决办法是,作为开发人员,您要确保所有系列都包含所有键并填充您没有的键,并确保所有系列中的所有键都以相同的顺序排列。
这样做的原因是只有您知道真正的顺序(这就是为什么在系列中使用 LinkedHashMap
)。 jQplot 或 PrimeFaces 无法知道这一点。如果例如第一个系列缺少一个键,该系列用作 'primary' 进行迭代,缺少的键将放在哪里。如果例如在位置 6,两者都有一把不在另一组中的钥匙,应该先拿哪一个? jqPlot 或 PrimeFaces 无法知道。作为开发人员的所有原因都应该通过将所有键放在所有系列中来确保它是明确的。