我知道在您提出问题后很长时间,但我遇到了类似的问题,即每当图表位于默认情况下未激活的选项卡上时,我的图表就会以零宽度呈现在客户端上。这是因为,正如@brent 所指出的,highcharts 使用父级的宽度,并且从 jQuery UI 1.9 开始,选项卡小部件使用内联样式display: none
来隐藏非活动选项卡。
与其使用 jQuery 的文档就绪事件来初始化您的 highchart,不如使用图表所在选项卡的激活事件。这有一个额外的好处,即每次用户单击选项卡时都会制作时髦的图表动画。
代替:
$(document).ready(function() {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
利用:
$('#tabcontainer').on('tabsactivate', function (event, ui) {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});