如何使用jQuery或jqPlot自定义PrimeFaces条形图属性
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用jQuery或jqPlot自定义PrimeFaces条形图属性相关的知识,希望对你有一定的参考价值。
我正在使用PrimeFaces 3.2。如果我使用下面的XHTML文件并想要将barChart图例位置自定义到外部网格并使用自定义消息修改工具提示,那么我如何编写仍然从View1.chartModel bean检索我的数据系列值的代码?
我正在寻找实际的代码和步骤......
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f ="http://java.sun.com/jsf/core"
xmlns:h ="http://java.sun.com/jsf/html"
xmlns:p ="http://primefaces.org/ui">
<h:head>
<h:outputStylesheet name="style.css" library="css"/>
<meta http-equiv="refresh"
content="#{session.maxInactiveInterval};url=timeout.xhtml" />
</h:head>
<h:body>
<p:ajaxStatus onstart="statusDialog.show();"
onsuccess="statusDialog.hide();"/>
<p:dialog modal="false"
widgetVar="statusDialog"
header="Status"
draggable="false"
closable="false">
<p:graphicImage value="/images/ajaxloadingbar.gif" />
</p:dialog>
<h:form id="ViewRep"
style="padding:10px;">
<p:growl id="messages"
showDetail="true"/>
<p:growl id="growl"
showDetail="true"/>
<div style="position:absolute;left:310px;top:620;width:920;height:360px;">
<p:panel id="pnl1"
header"Trend"
style="width:920;height:360px;"
toggleable="true"
closable="true"
toggleSpeed="500"
closeSpeed="500"
widgetVar="panel1">
<p:barChart id="BarChart1"
value="#{View1.chartModel}"
widgetVar="bar1"
legendPosition="n"
barPadding="5"
barMargin="10"
style="width:98%;height:300px;" />
</p:panel>
</div>
</h:form>
</h:body>
</html>
答案
我更喜欢更新您的PrimeFaces版本,然后您应该使用扩展程序,但如果您不想更新,则可以在页面加载上运行javascript代码。使用绘图在图表上进行更改。
图例位置的示例:
- 首先,您应该在图表组件上设置widgetVar =“barChart”:
<p:barChart id="basic" value="#{chartBean.categoryModel}" widgetVar="barChart" title="Basic Bar Chart" min="0" max="200" style="height:300px"/>
- 然后在页面加载上编写此JavaScript代码。 function redrawChart(){barChart.plot.legend.location =“se”; barChart.plot.redraw(); }
或者在需要时调用redrawChart()。
祝好运!
以上是关于如何使用jQuery或jqPlot自定义PrimeFaces条形图属性的主要内容,如果未能解决你的问题,请参考以下文章
如何使用js或jQuery向ajax请求添加自定义HTTP标头?
iframe中jqplot(jquery绘图)不能自动加载,调用resetZoom()方法后才显示。
dateaxisrender jqplot xticks 宽度不一致