可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am working on Highcharts. I also used Bootstrap for tabs. I have two charts, and each one of the chart I want to show in the different tab. Somehow I am getting correct first chart in the first tab. But second tab is empty. Please find below my code.

HTML

<div class="container">
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#home">Quarterly</a></li>
          <li><a data-toggle="tab" href="#menu1">Waterline</a></li>
        </ul>

        <div class="tab-content">
          <div id="home" class="tab-pane fade in active">
            <br/><br/>
            <select id="dropdown">
              <option>Portfolio</option>
            </select>
            <br/><br/><br/>
            <div class="left" id="left" style="width: 790px; height: 400px; margin: 0 auto"></div>
          </div>
          <div id="menu1" class="tab-pane fade">
            <div class="right" id="right" style="width: 790px; height: 400px; margin: 0 auto"></div>
          </div>
        </div>
      </div>

$('#home').click(function () {
        alert("left");
        $('#left').highcharts().reflow();
      });
      $('#menu1').click(function () {
        alert("right");
        $('#right').highcharts().reflow();
});

Also, if you can see I've given alert messages also. It is not running at all? Though first tab is working fine.

Please suggest. TIA.

RESOLVED: From here: Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

回答1:

I've found the answer for the question I've asked above. Please find the solution below:

CSS

<style type="text/css">
      .tab-content .tab-pane .highcharts-container {
          border: 0px;
      }

      .tab-content > .tab-pane {
        display: block;
        height: 0;
        overflow-y: hidden;
      }

    .tab-content > .active {
        height: auto;
    }

    .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus, .nav-tabs > .active > a:active {
        outline:none;
    }
    </style>
    <style type="text/css">
      #left, #right{
        float: left;
    }
    </style>

HTML

<div class = "row-fluid">
        <div class = "span9">
            <div class = "row-fluid">
                <ul class="nav nav-tabs">
                        <li class = "active">
                            <a data-toggle = "tab" href = "#one">Chart 1</a>
                        </li>
                        <li><a data-toggle = "tab" href = "#two">Chart 2</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="one" >
                            <div class="left" id="left" style="width: 790px; height: 400px; margin: 0 auto"></div>
                        </div>

                        <div class="tab-pane" id="two" >
                          <br/><br/><br/>
                          <div class="right" id="right" style="width: 790px; height: 400px; margin: 0 auto"></div>
                        </div>
                    </div> 
            </div>
        </div>
    </div>

And I am calling Highcharts inside some function usually. Have a small code snippet below. It is just to mention for few people how it is coming. Showing for only one chart only beginning.

$('#left').highcharts({
              chart: {
                  type: 'column'
              },
              title: {
                  text: 'Some Title'
              },
              xAxis: {
                  type: 'category'
              },
              yAxis: {
                  title: {
                      text: ''
                  }
              }, // Like this further inputs for Highcharts.

NOTE: Above highchart code is only for demonstration and is incomplete.

I hope this solution will help. Thanks for your time guys.

回答2:

the problem is that the click event is triggered when you click inside the tab it self ...

if you want the chart to be reflowed when you clic on the tab navigation bar you need to add the click event listener for the element

$("a[href='#home']).click(function() {
     $('#left').highcharts().reflow();
});

$("a[href='#menu1']).click(function() {
     $('#right').highcharts().reflow();
});

because when bootstrap renders the tabs it will create the navigation bar for the tabs ... look at this picture for the html result ...

回答3:

Your problem is your click handlers; they are configured for when you click on the tab body and not the tab itself. So if you click on your blank area on tab 2, you will get your alert.

As I see it, you have 2 easy solutions for addressing this.

Solution 1 Update your tabs to have Id's and update your JavaScript click handlers appropriately.

HTML

<ul id="myTabs" class="nav nav-tabs">
    <li class="active"><a id="home-tab" data-toggle="tab" href="#home">Quarterly</a></li>
    <li><a id="menu-tab" data-toggle="tab" href="#menu1">Waterline</a></li>
</ul>

$('#home-tab').click(function () {
    alert("left");
    $('#left').highcharts().reflow();
});

$('#menu-tab').click(function () {
    alert("right");
    $('#right').highcharts().reflow();
});

Solution 2

Use a single click handler that uses logic to determine what to do with the tabs.

HTML

<div class="container">
  <ul id="myTabs" class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home" data-tableId="left">Quarterly</a></li>
    <li><a data-toggle="tab" href="#menu1" data-tableId="right">Waterline</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      Home Tab
      <select id="dropdown">
        <option>Portfolio</option>
      </select>
      <div class="left" id="left" style="width: 790px; height: 400px; margin: 0 auto"></div>
    </div>
    <div id="menu1" class="tab-pane fade">
      Menu 1 Tab
      <div class="right" id="right" style="width: 790px; height: 400px; margin: 0 auto"></div>
    </div>
  </div>
</div>

$('#myTabs a').click(function(e) {
  e.preventDefault();
  $("#" + e.target.dataset.tableid)).highcharts().reflow();
  $(this).tab('show');
});

I think solution 2 is better because it allows you to have a single jquery function that can handle all tabs. It just requires an Id on your UL and a data attribute on each tab.