Многолинейный график (простые символы) на одной странице

Question

Я пытаюсь вставить более одной линейной диаграммы на одной странице. Для понимания, что у меня есть код бина:

public void createChartWithMetrics() {
    this.cartesianChartModel = new ArrayList<CartesianChartModel>();
    ServiceMetricsDAO serviceMetricDAO = new ServiceMetricsDAO();
    List<String> uriEntityList = new ArrayList<String>();
    for (TreeNode selectedNode : analyzeMetricMenuTree.getSelectedNodes()) {
        uriEntityList.add(selectedNode.getData().toString());
    }

    this.serviceMetricMap = serviceMetricDAO.getServiceMetricMapByEntityList(uriEntityList, Utility.convertDateToString(DATEFORMAT, dateFrom),
            Utility.convertDateToString(DATEFORMAT, dateTo));

    for (List<List<ServiceMetric>> serviceMetricListList : serviceMetricMap.values()) {
        if(!serviceMetricListList.isEmpty()) {
            this.cartesianChartModel.add(createModelFromList(serviceMetricListList));
        }
    }
}

private CartesianChartModel createModelFromList(final List<List<ServiceMetric>> serviceMetricListList) {
    CartesianChartModel cartesianChart = new CartesianChartModel();
    for (List<ServiceMetric> serviceMetricList : serviceMetricListList) {
        if (!serviceMetricList.isEmpty()) {
            ChartSeries chartSeries = new ChartSeries();
            for (ServiceMetric serviceMetric : serviceMetricList) {
                chartSeries.setLabel(serviceMetric.getDependsOn());
                chartSeries.set(serviceMetric.getAtTime(), serviceMetric.getHasMetricValue());
            }
            cartesianChart.addSeries(chartSeries);
        }
    }
    return cartesianChart;
}

и код страницы:

<ui:repeat var="cartesianChartModel" value="#{analyzeMetricsController.cartesianChartModel}">
    <h:panelGroup layout="block" styleClass="panel panel-default col-lg-12" rendered="#{not empty cartesianChartModel}">
        <h:panelGroup layout="block" styleClass="panel-body panel-default">
            <p:lineChart id="chart" widgetVar="chart" 
                value="#{cartesianChartModel}" 
                legendPosition="ne" xaxisAngle="-45" zoom="true" 
                maxY="#{analyzeMetricsController.maxY}" 
                minY="#{analyzeMetricsController.minY}" 
                fill="#{analyzeMetricsController.filled}" 
                stacked="#{analyzeMetricsController.stacked}" />
        </h:panelGroup>
    </h:panelGroup>
</ui:repeat>

но только последний граф модели вставляется. Более того, если я добавлю этот код под тегом

<h:panelGroup layout="block" styleClass="panel-body panel-default">
    <p:lineChart id="chart" widgetVar="chart" 
        value="#{cartesianChartModel}" 
        legendPosition="ne" xaxisAngle="-45" zoom="true" 
        maxY="#{analyzeMetricsController.maxY}" 
        minY="#{analyzeMetricsController.minY}" 
        fill="#{analyzeMetricsController.filled}" 
        tacked="#{analyzeMetricsController.stacked}" />
</h:panelGroup>

только этот последний график вставляется и игнорируется.

Answer 1

Это проблема с идентификатором, вам нужно сделать что-то вроде этого:

<p:lineChart id="chart#{cartesianChartModel.id}" widgetVar="chart#{cartesianChartModel.id}" ... />

Потому что вы не можете визуализировать два элемента с одинаковым идентификатором.