0

次のコードを取得しました。1 つの Jquery タブにはテーブルが表示され、もう 1 つのタブには 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>
4

2 に答える 2

0

フィドルを見てください

<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 を適切に囲む必要があります。

于 2013-04-19T11:00:11.820 に答える