如何在加载PF图表时显示'loading'

Question

我已经用SQL查询实现了PrimeFaces图表。

当我打开带有图表的 JSF 页面时，我注意到一个性能问题。我很感兴趣，当图表准备好显示时，是否可以在图表中心显示"正在加载...."？

编辑

我添加了图表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 层？可能吗？

Answer 1

您可以尝试图表的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" />
   

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

Answer 2

好吧，

您可以添加一些自定义jquery代码，例如：将动画图像插入图表div onstart并将其隐藏在完成时，

开始 ： $('#dcpower').prepend('<img id="theImg" src="theImg.png" />')

完成 ：$("#theImg").hide(); <----这样的事情

或者添加一些这样的文本

开始 ： $('#dcpower').prepend('<span id="theText">Loading...</span>')

完成 ：$("#theText").hide(); <----这样的事情