加载PF图时如何显示“加载中" [英] How to display 'loading' while loading PF chart

问题描述

我已经通过SQL查询实现了PrimeFaces 图表.

I have implemented PrimeFaces chart with SQL queries.

在打开带有图表的JSF页面时，我发现了性能问题.我有兴趣在准备显示图表时是否可以在图表的中心显示正在加载..."?

I noticed a performance problem while I open the JSF page with the chart. I'm interested is it possible to display "Loading.." at the center of the chart while the chart is ready for displaying?

编辑

EDIT

我添加了图表div层的这一见解:

I added this insight of the chart div layer:

<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层的消息?是否有可能?

But I noticed that when I click on the chart the entire JSF page displays message. How I can only display the message only insight the div layer? Is it possible?

推荐答案

您可以尝试 BlockUI 和图表的preRenderComponent事件.

1. 将事件添加到图表中.您可以使用事件监听器初始化图表

1. Add the event to the chart. You can use the event listener to initialize your chart

   <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>

在目标面板之外定义<p:blockUI/>

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

我还没有测试过，但是我相信它的理论是合理的.如果事件未触发blockUI，请尝试在blockUI的trigger属性中使用图表本身

I haven't tested this but I believe the theory of it is plausible. If the event doesn't trigger the blockUI, try using the chart itself in the trigger attribute of blockUI

这篇关于加载PF图时如何显示“加载中"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！