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

Question

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

<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时，只有第一个选项卡将显示一个图形。另外两个标签是空白的。这是我的javascript。任何帮助都将不胜感激！这是在jsFiddle - http://jsfiddle.net/tightsoundmusic/nLvqk4sp/中

<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>

Answer 1

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

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

$(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 */

演示