Question

我从Primefaces获得了两个MeterGaugeChartModel。目前一个在另一个之下，但我希望它们彼此相邻。我怎么能这样做？

<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>

Answer 1

我认为您正在寻找@kolossus提出的解决方案。在showcase website of Primefaces上，您可以找到许多此类解决方案的示例，例如first example。

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

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

Answer 2

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

如果您不需要任何额外的 JSF组件，您可以使用非常简单的CSS：将float:left添加到两个计量表组件并添加额外的<div style="clear:both">：< / p>

<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>

如何将MeterGaugeChartModel这两个Primefaces元素彼此相邻？

2 个答案: