如何使用 PrimeFaces 在 tabView 中渲染图表

Question

我需要在某种状态页面上显示大量图表。图表应分组在 tabView 和 accordionPanel 中。此设置适用于 PrimeFaces 2.2.1。由于新版本的某些功能（并且图表不再是 Flash），我正在尝试迁移到 PrimeFaces 3（目前为 3.0.M3）。

<p:tabView>  
  <p:tab title="One">  
    <p:pieChart value="#{myBean.myChartOne}" />
  </p:tab>
  <p:tab title="Two">  
    <p:pieChart value="#{myBean.myChartTwo}" />
  </p:tab>
</p:tabView>

使用 PrimeFaces 3 时，图表不会显示。有一个错误报告描述了此问题并指出应该在 3.0 M4 中延迟加载图表。

更新：

我现在使用带有延迟加载图表的 PrimeFaces 3.0 M4 快照。它看起来像这样：

<p:tabView>  
      <p:tab>
        <p:accordionPanel>  
            <p:tab title="All time">  
                <p:commandButton value="load chart" type="button" onclick="onTimeChartAll.init(); buttonOnTimeChartAll.disable();"
                    widgetVar="buttonOnTimeChartAll"/>
                <p:pieChart value="#{myBean.onTimeChartAll}" lazy="true" 
                    widgetVar="onTimeChartAll" />
            </p:tab>
            <p:tab title="30 Days">  
                <p:commandButton value="load chart" type="button" onclick="onTimeChart30Days.init();buttonOnTimeChart30Days.disable();"
                    widgetVar="buttonOnTimeChart30Days"/>
                <p:pieChart value="#{myBean.onTimeChart30Days}" lazy="true" widgetVar="onTimeChart30Days" />
            </p:tab>
        </p:accordionPanel>
    </p:tab>
    [...] <!-- and so on -->
</p:tabView>

我可以打开一个选项卡并单击按钮来加载图表。现在我想找到一种解决方案，在打开选项卡时自动加载图表。有没有解决方案可以在打开选项卡时自动加载图表？对于 p:accordionPanel 和 p:tabView 有 onTabShow 属性，但我想我需要它来 p:tab< /代码>。或者是否有可能通过 onTabShow 和 var 处理当前打开选项卡的 widgetVar ？

Answer 1

primefaces 项目负责人刚刚写了一篇 博客文章 说这个问题应该在 3.0.M4 中修复：

我们很高兴与大家分享，即将推出的 PrimeFaces 3.0.M4 对此有一个通用解决方案，因此在页面上您无需处理这些问题，因为 PrimeFaces 会在幕后为您处理这些问题。