任何人一起使用了Highcharts 2.1.4的选项卡(jquery-ui-1.8.9)和饼图？简单来说，我有多个选项卡，每个选项卡显示不同数据的饼图。图表可以渲染到div上，但是当我点击第二个选项卡时，图表会显示在它所在的右侧的300px。每当我放大或缩小浏览器窗口时，图表都会返回到修正位置。
我的代码：
//假设数字标签是基于变量$ count生成的，并且有2个选项卡
<script type="text/javascript">
var chart_tab_<?=count?>;
$(document).ready(function() {
chart_tab_<?=count?> = new Highcharts.Chart({
chart: {
renderTo: 'chart_tab_<?=count?>',// blah blah
}
<body>
<div id="chart_tab_<?=count?>"></div>
</body>
同样，图表呈现，但是在第二个选项卡上，显示屏被发现。
更新：我知道这个种类修复了这个问题：
<script type="text/javascript">
$(document).ready(function() {
$( "#tabs" ).tabs({
cookie: { expires: 1 }
});
$( "#tabs" ).tabs({
select: function(event,ui) { window.location.reload(); }
});
});
解决方法
这是我的解决方案(仅在Safari和Firefox中测试)。如果您想将图表加载到宽度宽的页面上的隐藏选项卡中，那么它的效果会很好。如果浏览器窗口调整大小，图表会调整大小。
在图表设置中，从页面加载时打开的选项卡设置图表的宽度(使用jQuery获取宽度)：
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',type: 'column',width: $('#tab-1').width()
},....
如果浏览器窗口调整大小，以下功能可调整宽度。 500是高度。如果在图表选项中未指定宽度，则会自动进行。
$(window).resize(function() {
chart.setSize($('#chart_tab').width(),500);
});
