0

我已经使用 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 层？是否可以？

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，尝试在triggerblockUI的属性中使用图表本身

于 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 回答