JQuery-Tabs中的表会阻止显示HighCharts

Question

我得到了以下代码，其中一个Jquery选项卡显示一个表，另一个选项卡显示使用HighCharts制作的饼图。如果我删除div标记之间的表，饼图就会成功显示，但是一旦在div中包含了表，饼图就不再显示。我的代码有问题吗?或者这是一个已知的highcharts/jQuery问题？

<script type="text/javascript">
    $(function () {
        $('#pie').highcharts({
            chart: { type:'pie' },
            title: { text: 'Test'},
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +' %';
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    dataLabels: false,
                    showInLegend: true
                }
            },
            series: [{
                name: 'Overall Attendance',
                data: [
                    ['Present Students',4],
                    ['Absent Students',4],
                    ['Late Students',5]
                ]
            }],
            colors: [
                '#132f55',
                '#eeeeee',
                '#7f95aa'
            ]
        });
    });
</script>

<p id="notice"><%= notice %></p>
<ul id="tabs" class="nav nav-tabs">
  <li class="active"><a href="#registration" data-toggle="tab">Registration</a></li>
  <li><a href="#pie" data-toggle="tab">Pie Chart</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="registration">
    <table border="1">
      <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
      </tr>
      <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
      </tr>
    </table>
    <%= link_to 'Edit', edit_register_path(@register) %> |
    <%= link_to 'Back', registers_path %>

  </div>
  <div class="tab-pane" id="pie" style="width:91%; height:400px; ">  </div>
</div>

Answer 1

请参阅fiddle

<div id="tabs">
  <ul>
    <li><a href="#registration">Nunc tincidunt</a></li>
    <li><a href="#pie">Proin dolor</a></li>

  </ul>
  <div class="tab-pane active" id="registration">
    <table border="1">
      <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
      </tr>
      <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
      </tr>
    </table>

  </div>
<div class="tab-pane" id="pie" style="width:91%; height:400px; ">  <div id="chart"></div>

</div>

您需要正确地包含div。

Answer 2

你想要这样吗？请在此处查看演示：http://jsfiddle.net/visnupriya/qFwwf/

代码如下：

    <li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
    <div id="container" style="width: 320px; height: 200px"></div>
</div>
<div id="tabs-2">
  <table border="1">
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>
</div>
<div id="tabs-3">
    <p>Content for Tab 3</p>
</div>

​