如何强制呈现使用jQuery和jqPlot库的JSF复合组件_Jquery_Jsf_Primefaces_Jqplot_Composite

如何强制呈现使用jQuery和jqPlot库的JSF复合组件

jquery jsf primefaces

如何强制呈现使用jQuery和jqPlot库的JSF复合组件,jquery,jsf,primefaces,jqplot,composite,Jquery,Jsf,Primefaces,Jqplot,Composite,我使用优秀的库Primefaces，但不幸的是，我不得不创建自己的组件来定制它问题是组件在第一个选项卡上显示良好，但在第二个选项卡上显示不好如何在加载选项卡期间强制显示零部件这里是自定义组件wm:dateLineChart： <?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

我使用优秀的库Primefaces，但不幸的是，我不得不创建自己的组件来定制它

问题是组件在第一个选项卡上显示良好，但在第二个选项卡上显示不好

如何在加载选项卡期间强制显示零部件

这里是自定义组件wm:dateLineChart：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:cc="http://java.sun.com/jsf/composite"
  xmlns:h="http://java.sun.com/jsf/html">

<!-- INTERFACE -->
<cc:interface>
</cc:interface>

<!-- IMPLEMENTATION -->
<cc:implementation>
    <h:panelGroup rendered="true">
        <div id="#{cc.id}" 
             style="height:208px;"/>
        <script type="text/javascript" >
            var chartId = '<h:outputText value="#{cc.id}"/>';
            dateLineChart(chartId);

            function dateLineChart(id) {
                $(document).ready(function(){
                    jQuery.jqplot (id, [[3,7,9,1,4,6,8,2,5]], {
                        title: 'Plot With Options',
                        axesDefaults: {
                            labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                        },
                        axes: {
                            xaxis: {
                                label: "X Axis",
                                pad: 0
                            },
                            yaxis: {
                                label: "Y Axis"
                            }
                        }
                    });
                });
            }
        </script>
    </h:panelGroup>
</cc:implementation>
</html>


var chartId=''；
日期线图（chartId）；
函数日期线图（id）{
$（文档）.ready（函数（）{
jQuery.jqplot（id，[[3,7,9,1,4,6,8,2,5]]{
标题：“带选项的绘图”，
axesDefaults：{
labelRenderer:$.jqplot.CanvasAxisLabelRenderer
},
轴线：{
xaxis：{
标签：“X轴”，
pad:0
},
亚克斯：{
标签：“Y轴”
}
}
});
});
}

在这里我使用它：

<p:tabView id="tabView" dynamic="true" cache="true">  

    <p:tab id="homeView">  
        <wm:dateLineChart id="chartOnFirstTab" />
    </p:tab>  

    <p:tab id="otherView" >
        <wm:dateLineChart id="chartOnSecondTab" />
    </p:tab>

</p:tabView>

提前感谢您的帮助。

要确保正确绘制图形，您需要在第一次显示相应图形时调用相应图形的

replot（）

方法（例如，单击包含选项卡的图形）

以下是我在

jqueryui

选项卡上的操作：

  $('#tabs').bind('tabsshow', function(event, ui) {
      if (ui.index === 1 && plot1._drawCount === 0) {
        plot1.replot();
      }
      else if (ui.index === 2 && plot2._drawCount === 0) {
        plot2.replot();
      }
  });

代码示例为take。如果您需要查找图表的选项卡，我在那里使用的方法可能与您相关。

要确保正确绘制图表，您需要在第一次显示相应图表时调用相应图表的

replot（）

方法（例如，单击包含选项卡的图表）

以下是我在

jqueryui

选项卡上的操作：

  $('#tabs').bind('tabsshow', function(event, ui) {
      if (ui.index === 1 && plot1._drawCount === 0) {
        plot1.replot();
      }
      else if (ui.index === 2 && plot2._drawCount === 0) {
        plot2.replot();
      }
  });

代码示例为take。如果您需要查找图表的选项卡，我在那里使用的方法可能与您相关。

一个具有Primefaces的自适应解决方案。希望它能为其他人服务

 <p:tabView id="tabView" dynamic="true" cache="true" onTabShow="refreshDateLineChart()" >
    //...
 </p:tabView>

具有素数面的自适应解决方案。希望它能为其他人服务

 <p:tabView id="tabView" dynamic="true" cache="true" onTabShow="refreshDateLineChart()" >
    //...
 </p:tabView>

谢谢，您的解决方案非常有效，其想法是在切换选项卡时启动replot。由于我使用Primefaces，我将发布一个经过调整的解决方案。谢谢，您的解决方案非常有效，其想法是在切换选项卡时启动replot。由于我使用Primefaces，我将发布一个经过调整的解决方案。