jqPlot graphs in each jQuery Mobile navbar tab, one is good, two are blank

问题

Banging my head against a wall on this one. I have seen similar questions in regards to standard jQuery tabs and accordions, but not for mobile. In jQuery Mobile I have implemented three tabs in a navbar as follows

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

What I want to do is have a jqPlot graph to each tab. Outside of the tabs all three graphs render perfectly. When using the tabbed div ID's only the first tab will show a graph. The other two tabs are blank. Here is my javascript. Any help would be greatly appreciated! Here it is in 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>

回答1:

When tab widget is created, only the first tab is visible and the rest are hidden. Therefore, it is not possible to access them when their dimensions are unknown.

Hence, your only option is to run jqPlot whenever a tab is activated by listening to tabsactivate event. When tabsactivate fires, it returns index of activate tab $(this).tabs("option", "active"). At that point, run jqPlot based on retrieved index.

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

Demo

来源：https://stackoverflow.com/questions/25756936/jqplot-graphs-in-each-jquery-mobile-navbar-tab-one-is-good-two-are-blank