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>

JQuery-Tabs中的表阻止显示HighCharts

2 个答案: