使用 p:layout 和仪表板进行图表蒙皮

Question

我似乎无法让我的代码按我想要的方式工作。我正在尝试使用 JSF 模板在页面上格式化图表。我正在使用 JSF2.0、NetBeans 6.9.1、GlassFish 3.0.1 和 Mojarra 2.0.3 和 PrimeFaces 2.2。对于我正在使用的模板。我已将图表放入仪表板面板中。图表本身会显示，但我无法修改它们的大小，或显示饼图图例。我已将文档和展示中显示的样式和脚本标签放在其他 css 引用所在的主模板页面上。我用过这段代码：

<style type="text/css">
        .chartClass {
            width: 250px;
            height: 145px;
        }
    </style>
    <script type="text/javascript">
        var piechartStyle = {
            padding:20,
            legend: {
                display: "right",
                spacing:10
            }
        };
    </script>

在我显示图表的模板客户端页面上，这是我使用的代码：

    <ui:define name="main_base_content">
                <h:form>
                    <p:dashboard id="board" model="#{dashboardBean.model}">

                        <p:panel id="receipts_chart" header="Receipts Chart" toggleable="true" toggleSpeed="200">
                            <p:pieChart model="#{receiptsChartBean.model}" styleClass="piechartStyle" />
                        </p:panel>
                        <p:panel id="shipments_chart" header="Shipments Chart" toggleable="true" toggleSpeed="200">
                            <p:pieChart model="#{shipmentsChartBean.model}" styleClass="piechartStyle" />
                        </p:panel>

                        <p:panel id="receipts_graph" header="Receipts Graph" toggleable="true" toggleSpeed="200">
                            <p:lineChart model="#{receiptsChartBean.lineModel}" var="line" titleX="Date" titleY="Number of Receipts">
                                <p:chartSeries label="Receipts" value="#{line.receipts}" />
                            </p:lineChart>
                        </p:panel>
                        <p:panel id="shipments_graph" header="Shipments Graph" toggleable="true" toggleSpeed="200">
                            <p:lineChart model="#{shipmentsChartBean.lineModel}" var="line" titleX="Date" titleY="Number of Shipments">
                                <p:chartSeries label="Receipts" value="#{line.receipts}" />
                            </p:lineChart>
                        </p:panel>


                        <p:panel id="volume_received_graph" header="Volume Received - Graph" toggleable="true" toggleSpeed="200">
                            <p:stackedColumnChart model="#{shipmentsChartBean.stackModel}" var="stack" titleX="Date" titleY="Receipts by Weight">
                                <p:chartSeries label="Customer1" value="#{stack.stackedShipments}" />
                                <p:chartSeries label="Customer2" value="#{stack.stackedShipments}" />
                                <p:chartSeries label="Customer3" value="#{stack.stackedShipments}" />
                                <p:chartSeries label="Customer4" value="#{stack.stackedShipments}" />
                            </p:stackedColumnChart>
                        </p:panel>
                        <p:panel id="weight_received_graph" header="Weight Received - Graph" toggleable="true" toggleSpeed="200">
                            <p:stackedColumnChart model="#{receiptsChartBean.stackModel}" var="stack" titleX="Date" titleY="Receipts by Weight">
                                <p:chartSeries label="Customer1" value="#{stack.stackedReceipts}" />
                                <p:chartSeries label="Customer2" value="#{stack.stackedReceipts2}" />
                                <p:chartSeries label="Customer3" value="#{stack.stackedReceipts3}" />
                                <p:chartSeries label="Customer4" value="#{stack.stackedReceipts4}" />
                            </p:stackedColumnChart>
                        </p:panel>
                    </p:dashboard>
                </h:form>
            </ui:define>

图表中填充了虚拟数据。它们显示，但蒙皮不起作用。我用 Firebug 查看了页面，发现尽管图表的宽度和高度分别设置为 250 像素和 145 像素，但它们仍保持默认值。

我不确定我哪里出错了。图表在布局和/或仪表板中不起作用吗？哦，我也尝试将 .chartClass 放入 cssLayout.css 文档中 - 也没有用。

Answer 1

我想出了如何重新调整图表的大小，这与它无关

<style type="text/css">
    .chartClass {
        width: 250px;
        height: 145px;
    }
</style>

我只是使用了不同图表标签的“高度”和“宽度”属性。注意：对于饼图标签，似乎只有宽度有效。如果我添加高度属性，图表将不会显示。不过没关系，因为 width 属性似乎会按比例重新调整整个图表的大小（如果您考虑一下，这是有道理的——它是一个圆圈）。对于其他图表类型，我同时使用了高度和宽度标签。

我仍然想使用上面显示的代码同时调整所有图表的大小，但我会使用我所拥有的。