PrimeFaces p:radarChart多实例渲染数据重叠与累加问题咨询

解决方案 #

1. 修复数据累加问题

每次生成新的雷达图列表前没有清空原有radarModelList，导致旧模型一直留在列表中，数据不断叠加。需要在生成新模型的逻辑前先清空列表：

// 生成新雷达图前先清空原有列表
radarModelList.clear();
// 再按需求添加新生成的RadarChartModel
for (/* 你的业务循环逻辑 */) {
    RadarChartModel newModel = radarChart.createRadarModel(/* 传入对应参数 */);
    radarModelList.add(newModel);
}

同时确认传入createRadarModel方法的listToFillDataVal、listToFilllabels两个参数每次都是独立实例，不要复用未清空的全局List。

2. 修复多雷达图数据串用问题

• 首先修改radarChart类的成员变量定义：当前你把radarModel定义为类成员变量，如果该类是托管单例，会导致多次调用方法时变量被覆盖，所有返回的模型指向同一块内存。改为方法内局部变量即可，同时建议类名遵循Java规范首字母大写。
• 其次给p:radarChart指定唯一ID，避免PrimeFaces自动生成重复ID导致渲染时数据绑定错误，借助ui:repeat的varStatus生成索引ID。

修改后的radarChart类代码：

public class RadarChart {
    public RadarChartModel createRadarModel(String chartLabel,List<Number> listToFillDataVal, List<String> listToFilllabels) {
        // 改为方法局部变量，避免共享覆盖
        RadarChartModel radarModel = new RadarChartModel();
        ChartData data = new ChartData();

        RadarChartDataSet radarDataSet = new RadarChartDataSet();
        radarDataSet.setLabel(chartLabel);
        radarDataSet.setFill(true);
        radarDataSet.setBackgroundColor("rgba(157, 108, 100, 0.4)");
        radarDataSet.setBorderColor("rgb(157, 108, 100)");
        radarDataSet.setPointBackgroundColor("rgb(157, 108, 100)");
        radarDataSet.setPointBorderColor("#fff");
        radarDataSet.setPointHoverBackgroundColor("#fff");
        radarDataSet.setPointHoverBorderColor("rgb(157, 108, 100)");
        radarDataSet.setData(listToFillDataVal);
        
        RadarChartDataSet radarDataSet2 = new RadarChartDataSet();
        radarDataSet2.setLabel("");
        radarDataSet2.setFill(false);
        radarDataSet2.setBackgroundColor("rgba(0,0,0,0)");
        radarDataSet2.setBorderColor("rgba(0,0,0,0)");
        radarDataSet2.setPointBackgroundColor("rgba(0,0,0,0)");
        radarDataSet2.setPointBorderColor("rgba(0,0,0,0)");
        radarDataSet2.setPointHoverBackgroundColor("rgba(0,0,0,0)");
        radarDataSet2.setPointHoverBorderColor("rgba(0,0,0,0)");
        List<Number> dataVal2 = new ArrayList<>();
        dataVal2.add(100);
        dataVal2.add(0);
        radarDataSet2.setData(dataVal2);
        
        data.addChartDataSet(radarDataSet);
        data.addChartDataSet(radarDataSet2);
        data.setLabels(listToFilllabels);

        /* Options */
        RadarChartOptions options = new RadarChartOptions();
        Elements elements = new Elements();
        ElementsLine elementsLine = new ElementsLine();
        elementsLine.setTension(0);
        elementsLine.setBorderWidth(3);
        elements.setLine(elementsLine);
        
        options.setElements(elements);
        radarModel.setOptions(options);
        radarModel.setData(data);
        
        return radarModel;
    }
}

修改后的xhtml页面代码：

<h:form id="radarAusgabeFormId">
    <ui:repeat value="#{AllManager.radarModelList}" var="radarModel" varStatus="status">
        <!-- 每个雷达图指定唯一ID，避免绑定冲突 -->
        <p:radarChart id="radarChart_#{status.index}" model="#{radarModel}" style="display: block;"/>
    </ui:repeat>
</h:form>

额外注意

如果是通过AJAX更新表单，确保更新的目标是整个radarAusgabeFormId表单，避免部分更新导致旧DOM残留出现数据叠加。

内容的提问来源于stack exchange，提问作者Benko