Question

我想在PrimeFaces中显示两个图表。

我正在使用Bootstrap 1.0.10，PrimeFaces 5.3和Tomcat 7。

奇怪的是，图表已呈现，但用户无法看到它。

stats.xhtml

<ui:define name="content">
    <div>
        <p:panel id="panel" header="Statistik"
                 style="margin: 20px;">
            <p:chart type="pie" model="#{statistikBean.chartModel1}"
                     style="width:400px; height:300px" />
            <p:chart type="metergauge"
                     model="#{statistikBean.chartModel2}"
                     style="width:400px; height:250px" />
        </p:panel>
    </div>
</ui:define>

StatistikBean.java

....

private PieChartModel chartModel1;
private MeterGaugeChartModel chartModel2;

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

private void doModels() {
this.chartModel1 = new PieChartModel();

// chartModel1
this.chartModel1.set("Fach 1", 10);
this.chartModel1.set("Fach 2", 20);
this.chartModel1.set("Fach 3", 30);
this.chartModel1.set("Fach 4", 40);

this.chartModel1.setTitle("Verteilung der Facher");
this.chartModel1.setLegendPosition("w");

// chartModel2
List<Number> intervall = new ArrayList<Number>(){{
    add(50);
    add(75);
    add(85);
    add(95);
}};

this.chartModel2 = new MeterGaugeChartModel(75, intervall);
this.chartModel2.setTitle("Fortschritt");
this.chartModel2.setSeriesColors("cc6666,E7E658,93b75f,66cc66");
this.chartModel2.setGaugeLabel("%");
}
.....

渲染输出：

<div>
    <div id="panel"
         class="ui-panel ui-widget ui-widget-content ui-corner-all"
         style="margin: 20px;"
         data-widget="widget_panel">

        <div id="panel_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
            <span class="ui-panel-title">Statistik</span>
        </div>
        <div id="panel_content" class="ui-panel-content ui-widget-content">
            <div id="j_idt17" style="width:400px; height:300px"></div>

            <script id="j_idt17_s" type="text/javascript">
                $(function () {
                    PrimeFaces.cw('Chart', 'widget_j_idt17', {
                        id: 'j_idt17',
                        type: 'pie',
                        data: [[["Fach 1", 10], ["Fach 2", 20], ["Fach 3", 30], ["Fach 4", 40]]],
                        title: "Verteilung der Facher",
                        legendPosition: "w",
                        datatip: true,
                        datatipFormat: "%s - %d"}, 'charts');
                });
            </script>
            <div id="j_idt18" style="width:400px; height:250px"></div>

            <script id="j_idt18_s" type="text/javascript">
                $(function () {
                    PrimeFaces.cw('Chart', 'widget_j_idt18', {
                        id: 'j_idt18',
                        type: 'metergauge',
                        data: [[75]],
                        title: "Fortschritt",
                        seriesColors: ["#cc6666", "#E7E658", "#93b75f", "#66cc66"],
                        intervals: [50, 75, 85, 95],
                        gaugeLabel: "%",
                        gaugeLabelPosition: "inside",
                        showTickLabels: true,
                        labelHeightAdjust: -25}, 'charts');
                });
            </script>
        </div>
    </div>

    <script id="panel_s" type="text/javascript">
        PrimeFaces.cw("Panel", "widget_panel", {id: "panel"});
    </script>
</div>

在Chrome和FireFox中测试过它。图表所在的区域只是白色。

Answer 1

好的，我发现了问题。我不小心把jQuery包括了两次。
一次在JSF模板（带引导程序）中，第二次使用Primefaces。

我从JSF模板中删除了它，它现在可以工作了。

p：图表不可见

1 个答案: