0

SQL クエリを使用して PrimeFacesチャートを実装しました。

グラフを含む JSF ページを開いているときに、パフォーマンスの問題に気付きました。グラフを表示する準備ができている間、グラフの中央に「Loading..」を表示することは可能ですか?

編集

チャート div レイヤーのこの洞察を追加しました。

<div id="powerchart" style="position: absolute; left: 420px; top: 40px; width: 700px; height: 330px" rendered="#{not DCProfileTabGeneralController.editable}">
    <!-- Live update
    <p:poll interval="3" update="dcpower" />
    -->

    <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>

    <p:dialog modal="true" widgetVar="statusDialog" header="Status"
              draggable="false" closable="false">

    </p:dialog>

    <p:barChart id="dcpower" value="#{DCProfileTabGeneralController.dcPower}" rendered="#{not DCProfileTabGeneralController.editable}"
                title="Datacenter Power Usage Statistics" min="0" style="height:330px; top: 10px;"
                shadow="true" barMargin="50" seriesColors="F8F8F8, 888888, 005CE6, 0047B2" extender="dcchartConfig"
                yaxisLabel="Size" zoom="true" stacked="false" >
        <p:ajax event="itemSelect" listener="#{DCProfileTabGeneralController.itemSelectDCPower}" update="growl" rendered="#{not DCProfileTabGeneralController.editable}"/>
    </p:barChart>

</div>

しかし、グラフをクリックすると、JSF ページ全体にメッセージが表示されることに気付きました。div レイヤーのメッセージのみを表示するにはどうすればよいですか? 出来ますか？

4

2 に答える 2

2

チャートBlockUIのイベントを試すことができます。preRenderComponent

  1. イベントをチャートに追加します。イベントリスナーを使用してチャートを初期化できます

       <p:barChart id="dcpower" value="#{DCProfileTabGeneralController.dcPower}" rendered="#{not DCProfileTabGeneralController.editable}"
        title="Datacenter Power Usage Statistics" min="0" style="height:330px; top: 10px;"
        shadow="true" barMargin="50" seriesColors="F8F8F8, 888888, 005CE6, 0047B2" extender="dcchartConfig"
        yaxisLabel="Size" zoom="true" stacked="false" >
      <f:event id="chartBlocker" type="preRenderComponent" listener="#{DCProfileTabGeneralController.initChart}"/>
      <p:ajax event="itemSelect" listener="#{DCProfileTabGeneralController.itemSelectDCPower}" update="growl" rendered="#{not DCProfileTabGeneralController.editable}"/>
   </p:barChart>

  2. <p:blockUI/>ターゲット パネルの外側を定義する

       <p:blockUI block="powerchart" trigger="chartBlocker" />

私はこれをテストしていませんが、その理論はもっともらしいと信じています。イベントが blockUI をトリガーしない場合は、blockUI のtrigger属性でチャート自体を使用してみてください

于 2013-02-02T14:37:52.153 に答える
1

たとえば、いくつかのカスタム jquery コードを追加できます。アニメーション画像をグラフ div onstart に挿入し、oncomplete で非表示にします。

開始時:$('#dcpower').prepend('<img id="theImg" src="theImg.png" />')

oncomplete : $("#theImg").hide();<---- このようなもの

または、このようなテキストを追加します

開始時:$('#dcpower').prepend('<span id="theText">Loading...</span>')

oncomplete : $("#theText").hide();<---- このようなもの

于 2013-02-01T22:40:04.980 に答える