图表剥皮使用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> 

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

我仍然希望使用上面显示的代码来同时调整所有图表的大小，但我会使用我所得到的。