So passen Sie eine PrimeFaces-Balken-Diagramm-Eigenschaft mit jQuery und jqPlot

Ich bin mit PrimeFaces 3.2. Wenn ich mit der unten XHTML - Datei und anpassen möchten, um die Balken-Legende position auf dem äußeren Gitter und änderung im tooltip mit benutzerdefinierte Nachricht, wie kann ich den code schreiben, wo meine Daten Serie Werte noch abgerufen von View1.chartModel bean?

Ich bin auf der Suche für den eigentlichen code und die Schritte...

<?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>
  • Da PrimeFaces nicht aussetzen diese Optionen, müssen Sie verwenden eine extender function. Siehe diese Frage: stackoverflow.com/questions/13096427/...
  • vielen Dank, ist dieser extender funtion unterstützt in primefaces 3.2 ???
  • Ich glaube extender ist nicht verfügbar in primefaces 3.2, die ich verwendet habe version 3.4 und es läuft jetzt..
  • Der XHTML-Code wird nicht gut gebildet - See in der Nähe-header"Trend".
InformationsquelleAutor user2012818 | 2013-01-26
  1. 1

    Ich lieber ein update Ihrer PrimeFaces version und dann sollten Sie verwenden, extender, aber wenn Sie nicht aktualisieren wollen, können Sie die Ausführung von JavaScript-code auf Ihre Seite laden. Verwenden Grundstück änderungen auf dem Diagramm.

    Ein Beispiel für die Legende Standort:

    • Zunächst sollten Sie Ihre widgetVar="barChart" auf Ihre chart-Komponente:

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

    • Dann schreiben Sie diesen JavaScript-code auf Ihre Seite laden.

      Funktion redrawChart() {
      barChart.plot.Legende.location="se";
      barChart.plot.redraw();
      }

    Oder rufen Sie redrawChart (), wenn Sie es brauchen.

    Glück!

    InformationsquelleAutor gokhansari
Schreibe einen Kommentar