如何使用 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，图表不会显示。有一个 bug report 描述了这个问题，并指出 3.0 M4 中的图表应该有延迟加载。

更新：

我现在使用 PrimeFaces 3.0 M4-snapshot 和延迟加载图表。它看起来像这样：

<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 项目负责人刚刚写了一封 blog post 说这应该在 3.0.M4 中修复：

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