Jquery mobile jqPlot图形在每个jQuery移动导航栏选项卡中，一个是好的，两个是空的

我的头撞在墙上。我在标准jQuery标签和手风琴上看到过类似的问题，但在手机上没有。在jQuery Mobile中，我在导航栏中实现了三个选项卡，如下所示

<div data-role="page" id="GraphPage">
<div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="#tab1" data-ajax="false" class="ui-btn-active">Tab 1</a></li>
      <li><a href="#tab2" data-ajax="false">Tab 2</a></li>
      <li><a href="#tab3" data-ajax="false">Tab 3</a></li>
    </ul>
  </div>
    <div id="tab1" style="width: 100%;"></div>
    <div id="tab2" style="width: 100%;"></div>
    <div id="tab3" style="width: 100%;"></div>
</div>
</div>

我想做的是在每个选项卡上都有一个jqPlot图。在选项卡之外，所有三个图形都能完美呈现。使用选项卡式div ID时，只有第一个选项卡将显示图形。其他两个选项卡为空。这是我的javascript。任何帮助都将不胜感激！这是在JSFIDLE中-

创建tab小部件时，只有第一个选项卡可见，其余选项卡隐藏。因此，当它们的尺寸未知时，不可能访问它们

因此，您唯一的选择是在通过侦听tabsactivate事件激活选项卡时运行jqPlot。当触发tabsactivate时，它返回激活选项卡的索引$this.tabsoption，active。此时，根据检索到的索引运行jqPlot

---

谢谢你的快速回复。不幸的是，当从另一个页面导航到此页面时，初始图形不会显示。通过单击任何选项卡，图形将正确填充。页面加载时不显示初始图形。思想？我正在考虑使用.onpageshow初始化初始图形。@NicClark在}.onepagecontainershow，plot1中用.on替换.one

<script type="text/javascript">
$("#GraphPage").on("pageshow",function(){
    var line1=[['2014-9-1 12:00AM',2], ['2014-9-2 12:00AM',4], ['2014-9-3 12:00AM',3], ['2014-9-4 12:00AM',2], ['2014-9-5 12:00AM',3]];
    var line2=[['2014-9-1 12:00AM',3], ['2014-9-2 12:00AM',2], ['2014-9-3 12:00AM',0], ['2014-9-4 12:00AM',3], ['2014-9-5 12:00AM',2]];
    var line3=[['2014-9-1 12:00AM',2], ['2014-9-2 12:00AM',4], ['2014-9-3 12:00AM',3], ['2014-9-4 12:00AM',2], ['2014-9-5 12:00AM',3]];
    var line4=[['2014-9-1 12:00AM',3], ['2014-9-2 12:00AM',2], ['2014-9-3 12:00AM',0], ['2014-9-4 12:00AM',3], ['2014-9-5 12:00AM',2]];
    var line5=[['2014-9-1 12:00AM',2], ['2014-9-2 12:00AM',4], ['2014-9-3 12:00AM',3], ['2014-9-4 12:00AM',2], ['2014-9-5 12:00AM',3]];
    var line6=[['2014-9-1 12:00AM',3], ['2014-9-2 12:00AM',2], ['2014-9-3 12:00AM',0], ['2014-9-4 12:00AM',3], ['2014-9-5 12:00AM',2]];

    var plot1 = $.jqplot('tab1', [line1,line2], {
        animate: true,
        axes:{
            xaxis:{
                renderer:$.jqplot.DateAxisRenderer,
                tickOptions:{formatString:'%#m/%#d'}
            },
            yaxis:{
                showTicks: false, 
            }
            }, 
        series:[{lineWidth:4, markerOptions:{style:'square'}}]
         });    

    var plot2 = $.jqplot('tab2', [line3,line4], {
        animate: true,
        axes:{
            xaxis:{
                renderer:$.jqplot.DateAxisRenderer,
                tickOptions:{formatString:'%#m/%#d'}
                  },
            yaxis:{
            showTicks: false, 
            }
            }, 
        series:[{lineWidth:4, markerOptions:{style:'square'}}]
        });

    var plot3 = $.jqplot('tab3', [line5,line6], {
        animate: true,
        axes:{
            xaxis:{
                renderer:$.jqplot.DateAxisRenderer,
                tickOptions:{formatString:'%#m/%#d'}
                 },
            yaxis:{
                showTicks: false, 
                  }
            }, 
       series:[{lineWidth:4, markerOptions:{style:'square'}}]
        });
    });

</script>

$(document).on("pagecreate", function () {
    $("#tabs").tabs({
        activate: function (e) {
            var activeTab = $(this).tabs("option", "active");
            if (activeTab == 0) {
                plot1();
            }
            if (activeTab == 1) {
                plot2();
            }
            if (activeTab == 2) {
                plot3();
            }
        }
    });
}).one("pagecontainershow", plot1); /* run it once on first tab */