如何在加载 PF 图表时显示“正在加载”答案

【问题标题】：How to display 'loading' while loading PF chart如何在加载 PF 图表时显示“正在加载”
【发布时间】：2013-02-01 21:06:58
【问题描述】：

我已经使用 SQL 查询实现了 PrimeFaces chart。

我在打开带有图表的 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 层？可能吗？

【问题讨论】：

使用 primefaces.org/showcase/ui/ajaxStatus.jsf 处理所有 ajax 加载...
是的，我喜欢一个可能的解决方案。但是是否可以只显示加载到图表 div 中而不是显示在整个页面上？
好吧，您可以添加一些自定义 jquery 代码，例如：将动画图像插入图表 div onstart 并将其隐藏 oncomplete ，onstart ：$('#dcpower').prepend('<img id="theImg" src="theImg.png" />') oncomplete ：$("#theImg").hide();
我不需要显示图像。我只需要“正在加载...”。你会把你的建议写成答案吗？

标签： jsf jsf-2 primefaces

【解决方案1】：

您可以试验BlockUI 和图表的preRenderComponent 事件。

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

   <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 属性中使用图表本身

【讨论】：

【解决方案2】：

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

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

未完成：$("#theImg").hide();

或者像这样添加一些文字

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

未完成：$("#theText").hide();

【讨论】：