1

我有两个MeterGaugeChartModel来自 Primefaces。目前一个在另一个下面，但我希望它们彼此相邻。我怎样才能做到这一点？

<p:panel header="Capacity Charts">
  <p:meterGaugeChart id="CPUchart" value="#{chartBean.meterGaugeModelCPU}"
                     showTickLabels="false" labelHeightAdjust="110" intervalOuterRadius="130"
                     seriesColors="66cc66, 93b75f, E7E658, cc6666" style="width:400px;height:250px"
                     title="CPU" label="percentage (%)"/>
  <p:meterGaugeChart id="RAMchart" value="#{chartBean.meterGaugeModelRAM}"
                     showTickLabels="false" labelHeightAdjust="110" intervalOuterRadius="130"
                     seriesColors="66cc66, 93b75f, E7E658, cc6666"
                     style="width:400px;height:250px"
                     title="RAM" label="percentage (%)"/>
</p:panel>
4

2 回答 2

3

我认为您正在寻找@kolossus 提出的解决方案。在Primefaces 的展示网站上，您可以找到许多此类解决方案的示例，例如第一个示例。

<p:panel header="Capacity Charts">
    <h:panelGrid columns="2">
        <p:meterGaugeChart id="CPUchart" ... />
        <p:meterGaugeChart id="RAMchart" ... />
    </h:panelGrid>
</p:panel>

这会将 的所有子元素添加panelGrid到下一列。因此，添加另一个<p:meterGaugeChart />会将其添加到下面行的第一列。

于 2013-03-15T14:06:54.563 回答
2

首先，@kolossus 提出了一个优秀的 JSF 风格的解决方案：将你的组件封装在一个面板网格中。我也会这样做。

如果你不想要任何额外的JSF 组件，你可以使用一个非常简单的 CSS：添加float:left到两个仪表组件并添加一个额外的<div style="clear:both">：

<p:panel header="Capacity Charts">
    <p:meterGaugeChart id="CPUchart" style="float:left;" ... />
    <p:meterGaugeChart id="RAMchart" style="float:left;" ... />
    <div style="clear:both"></div>
</p:panel>
于 2013-03-15T13:54:15.173 回答