1

MeterGaugeChartModelPrimefaces から2 つ入手しました。現在、一方が他方の下にありますが、私はそれらを隣り合わせにしたいと考えています。どうやってやるの？

<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のショーケース Web サイトでは、最初の例のように、そのようなソリューションの多くの例を見つけることができます。

<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 に答える