Jsf 使用p:布局和仪表板进行图表蒙皮
我似乎无法让我的代码按我想要的方式工作。我正在尝试使用JSF模板在页面上格式化图表。我正在使用JSF2.0、NetBeans 6.9.1、GlassFish 3.0.1和Mojarra 2.0.3以及PrimeFaces 2.2。对于我正在使用的模板。我已将图表放在仪表板面板中。图表本身会显示,但我无法修改其大小,也无法显示图表图例。我已经将样式和脚本标记(如文档和showcase中所示)放在其他css引用所在的主模板页面上。我使用了以下代码:Jsf 使用p:布局和仪表板进行图表蒙皮,jsf,primefaces,Jsf,Primefaces,我似乎无法让我的代码按我想要的方式工作。我正在尝试使用JSF模板在页面上格式化图表。我正在使用JSF2.0、NetBeans 6.9.1、GlassFish 3.0.1和Mojarra 2.0.3以及PrimeFaces 2.2。对于我正在使用的模板。我已将图表放在仪表板面板中。图表本身会显示,但我无法修改其大小,也无法显示图表图例。我已经将样式和脚本标记(如文档和showcase中所示)放在其他css引用所在的主模板页面上。我使用了以下代码: <style type="text/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>
.chartClass{
宽度:250px;
高度:145px;
}
var piechartStyle={
填充:20,
图例:{
显示:“对”,
间距:10
}
};
在显示图表的模板客户端页面上,我使用了以下代码:
<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文档中-这也不起作用。我找到了重新调整图表大小的方法,但这与
<style type="text/css">
.chartClass {
width: 250px;
height: 145px;
}
</style>
.chartClass{
宽度:250px;
高度:145px;
}
我只是使用了不同图表标签的“高度”和“宽度”属性。注意:对于饼图标记,似乎只有宽度有效。如果我添加高度属性,图表将不会显示。不过这没关系,因为width属性似乎会按比例重新调整整个图表的大小(如果你仔细想想,这是有道理的——它是一个圆)。对于其他图表类型,我使用了高度和宽度标记
我仍然希望使用上面显示的代码来同时调整所有图表的大小,但我将使用我得到的