Question

我正在使用primefaces 5.0并希望创建lineChart。

但是，我无法使示例运行：

package com.srbp.service;

@ManagedBean
@ViewScoped
public class ChartView implements Serializable {

    /**
     * UUID
     */
    private static final long serialVersionUID = 7618160241636269628L;

    private LineChartModel lineModel1;
    private LineChartModel lineModel2;

    @PostConstruct
    public void init() {
        createLineModels();
    }

    public LineChartModel getLineModel1() {
        return lineModel1;
    }

    public LineChartModel getLineModel2() {
        return lineModel2;
    }

    private void createLineModels() {
        lineModel1 = initLinearModel(); //I get an error here
        lineModel1.setTitle("Linear Chart");
        lineModel1.setLegendPosition("e");
        Axis yAxis = lineModel1.getAxis(AxisType.Y);
        yAxis.setMin(0);
        yAxis.setMax(10);

        lineModel2 = initCategoryModel();
        lineModel2.setTitle("Category Chart");
        lineModel2.setLegendPosition("e");
        lineModel2.setShowPointLabels(true);
        lineModel2.getAxes().put(AxisType.X, new CategoryAxis("Years"));
        yAxis = lineModel2.getAxis(AxisType.Y);
        yAxis.setLabel("Births");
        yAxis.setMin(0);
        yAxis.setMax(200);
    }

    private CartesianChartModel initLinearModel() {
        CartesianChartModel model = new CartesianChartModel();

        LineChartSeries series1 = new LineChartSeries();
        series1.setLabel("Series 1");

        series1.set(1, 2);
        series1.set(2, 1);
        series1.set(3, 3);
        series1.set(4, 6);
        series1.set(5, 8);

        LineChartSeries series2 = new LineChartSeries();
        series2.setLabel("Series 2");

        series2.set(1, 6);
        series2.set(2, 3);
        series2.set(3, 2);
        series2.set(4, 7);
        series2.set(5, 9);

        model.addSeries(series1);
        model.addSeries(series2);

        return model;
    }

    private LineChartModel initCategoryModel() {
        LineChartModel model = new LineChartModel();

        ChartSeries boys = new ChartSeries();
        boys.setLabel("Boys");
        boys.set("2004", 120);
        boys.set("2005", 100);
        boys.set("2006", 44);
        boys.set("2007", 150);
        boys.set("2008", 25);

        ChartSeries girls = new ChartSeries();
        girls.setLabel("Girls");
        girls.set("2004", 52);
        girls.set("2005", 60);
        girls.set("2006", 110);
        girls.set("2007", 90);
        girls.set("2008", 120);

        model.addSeries(boys);
        model.addSeries(girls);

        return model;
    }

}

但是，我在lineModel1 = initLinearModel();收到错误消息。将此转换为CartesianChartModel时，错误将得到解决。但是，使用时我没有显示任何内容：

                <p:panel widgetVar="panel" visible="false" closable="true">
                    <h3>Throughput</h3>

                    <p:lineChart type="line" model="#{chartView.lineModel2}"
                        style="height:300px;" />
                </p:panel>

此外，在HTML中，图表的div为空。

有任何建议如何解决？

更新

当我添加<h:head />时，我将页面更改为（见下文）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

<h:head />

<body>
    <ui:composition template="/site/master/master_template.xhtml">
        <ui:define name="content">

            <div>
                <h:form>

                    <p:growl id="growl" sticky="true" showDetail="true" />

                    <p:wizard flowListener="#{streamEngineWizard.onFlowProcess}">

                        <p:tab id="confirm" title="6. Confirmation">
                            <p:panel header="Confirmation">
                                <h:panelGrid id="confirmation" columns="3"
                                    columnClasses="grid,grid,grid">
                                    Summary of all values!
                                </h:panelGrid>

                                <p:commandButton value="Run Benchmark!" ajax="true"
                                    actionListener="#{streamEngineWizard.save}" update="growl"
                                    process="@this"
                                    onclick="PF('panel_progress').show();PF('pbAjax').start();" />
                            </p:panel>
                        </p:tab>
                    </p:wizard>
                </h:form>

                <!-- progressbar panel -->
                <p:panel widgetVar="panel_progress" visible="false" closable="true"
                    toggleable="true" rendered="true">
                    <h:form>
                        <p:growl id="growl" />

                        <h3>Your configuration is running!</h3>
                        <br />
                        <p:progressBar widgetVar="pbAjax" ajax="true"
                            value="#{progressBarView.progress}" labelTemplate="{value}%"
                            styleClass="animated" global="false">
                            <p:ajax event="complete" listener="#{progressBarView.onComplete}"
                                update="growl" oncomplete="PF('panel_analytics').show()" />
                        </p:progressBar>

                    </h:form>
                </p:panel>

                <div style="margin-top: 40px;" />

                <!-- analytics panel -->
                <p:panel widgetVar="panel_analytics" visible="false" closable="true">
                    <h3>Throughput</h3>

                    <p:chart type="line" model="#{chartView.animatedModel1}"
                        style="height:300px;" rendered="true"  />
                </p:panel>

                <p:chart type="line" model="#{chartView.animatedModel1}"
                        style="height:300px;" rendered="true"  />

            </div>
        </ui:define>
    </ui:composition>

    <script type="text/javascript">
function start() {

    window['progress'] = setInterval(function() {
        var pbClient = PF('pbClient'),
        oldValue = pbClient.getValue(),
        newValue = oldValue + 10;

        pbClient.setValue(pbClient.getValue() + 10);

        if(newValue === 100) {
            clearInterval(window['progress']);
        }


    }, 1000);
}
</script>
</body>
</html>

然而，当我将<p:chart放在<p:panel widgetVar="panel_analytics" visible="false" closable="true">之外时，它会被渲染。但是，我需要在面板中渲染它，因为在进度条达到100％后，应显示分析面板。

有关如何实现我的用例的任何建议吗？

Answer 1

在ChartView.java中更改此内容

private LineChartModel initLinearModel（）{ LineChartModel model = new LineChartModel（）;

    LineChartSeries series1 = new LineChartSeries();
    series1.setLabel("Series 1");

    series1.set(1, 2);
    series1.set(2, 1);
    series1.set(3, 3);
    series1.set(4, 6);
    series1.set(5, 8);

    LineChartSeries series2 = new LineChartSeries();
    series2.setLabel("Series 2");

    series2.set(1, 6);
    series2.set(2, 3);
    series2.set(3, 2);
    series2.set(4, 7);
    series2.set(5, 9);

    model.addSeries(series1);
    model.addSeries(series2);

    return model;
}

并在ChartView.java的开头添加它

import org.primefaces.model.chart.CategoryAxis;

在primefaces 5.0中创建折线图

1 个答案: