Question

我已经使用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层？可能吗？

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

Answer 2

嗯，你可以添加一些自定义jquery代码，例如：将动画图像插入图表div onstart并将其隐藏在oncomplete上，

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

oncomplete：$("#theImg").hide();＆lt; ----类似这样的

或者添加一些这样的文字

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

oncomplete：$("#theText").hide();＆lt; ----类似这样的

如何显示＆＃39; loading＆＃39;在加载PF图表时

2 个答案: