圖表剝皮使用p：layout和Dashboards

Question

我似乎無法讓我的代碼按我想要的方式工作。我試圖用JSF模板在頁面上格式化圖表。我使用JSF2.0，NetBeans 6.9.1，Mojarra 2.0.3的GlassFish 3.0.1和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頁面，發現儘管分別將圖表的寬度和高度分別設置爲250px和145px，但它們仍保持默認值。

我不知道，我已經走了錯。圖表不適用於佈局和/或儀表板嗎？哦，我也嘗試將.chartClass放入cssLayout.css文件中 - 這也不起作用。

Answer 1

我想出如何重新大小的圖表，它有無關

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

我只是用了「高度」和不同的圖表標籤的「寬度」屬性。注：對於餅圖標記，只有寬度似乎工作。如果我添加高度屬性，圖表不會顯示。沒關係，因爲寬度屬性似乎按比例重新調整整個圖表的大小（如果你考慮它 - 它是一個圓圈，這是有意義的）。對於其他圖表類型，我使用了高度和寬度標籤。

我仍然希望使用上面顯示的代碼來同時調整所有圖表的大小，但我會使用我所得到的。