如何使用 jQuery 或 jqPlot 自定义 PrimeFaces 条形图属性答案

【问题标题】：How to customize a PrimeFaces bar chart property using jQuery or jqPlot如何使用 jQuery 或 jqPlot 自定义 PrimeFaces 条形图属性
【发布时间】：2013-01-26 01:47:46
【问题描述】：

我正在使用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 不公开这些选项，您需要使用extender function。看到这个问题：stackoverflow.com/questions/13096427/…
谢谢，primefaces 3.2 支持这个扩展功能吗？？？
我相信扩展器在 primefaces 3.2 中不可用，我使用的是 3.4 版本，它现在正在运行..
XHTML 格式不正确 - 请参阅 header"Trend" 附近。

标签： jquery primefaces jqplot bar-chart

【解决方案1】：

我更喜欢更新您的 PrimeFaces 版本，然后您应该使用扩展程序，但如果您不想更新，您可以在页面加载时运行 JavaScript 代码。使用 plot 对图表进行更改。

图例位置示例：

首先，您应该在图表组件上设置 widgetVar="barChart"：

<p:barChart id="basic" value="#{chartBean.categoryModel}" widgetVar="barChart"
            title="Basic Bar Chart" min="0" max="200" style="height:300px"/>

然后在页面加载时编写此 JavaScript 代码。
函数重绘图表（）{ barChart.plot.legend.location="se"; barChart.plot.redraw(); }

或在需要时调用 redrawChart()。

祝你好运！

【讨论】：