次のコードを取得しました。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>