您好，我在使用 jquery 选项卡时遇到了 highstocks 问题。
这是构造函数的代码。
Chart = new Highcharts.StockChart({
Chart = new Highcharts.StockChart({
chart: {
renderTo:
'Container',
alignticks:false
},
xAxis: { .......... },
yAxis: [{ ....... }],
series : [{ .......... }]
});
容器只有整个页面宽度的一半。
当页面加载到包含图形的选项卡时，它的宽度会正确呈现。但是当页面首先加载到另一个选项卡时，它的宽度会跨越页面的整个宽度，与页面上的其他内容重叠。因此，必须刷新页面才能解决此问题。
有人对此有解决方案吗？
您还可以触发 window.resize 事件
$(window).trigger('resize');
并且 Highcharts 应该更新图表大小
Highcharts sets the width of the chart to the width of the containing element. So if the containing element is hidden, it can't get a width.
To fix this you can set the width option when initializing your chart:
Chart = new Highcharts.StockChart({
Chart = new Highcharts.StockChart({
chart: {
renderTo: ...,
width: <SOME WIDTH>
},
xAxis: { .......... },
yAxis: [{ ....... }],
series : [{ .......... }]
});
If you aren't able to set the chart to a proper width I've used this trick to be able to get the width of a hidden element:
我知道在您提出问题后很长时间，但我遇到了类似的问题，即每当图表位于默认情况下未激活的选项卡上时，我的图表就会以零宽度呈现在客户端上。这是因为，正如@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]
}]
});
});
您可以使用百分比设置图形容器 div 的宽度。
像这样的东西应该工作。
<div id = "tab1">
<div id="graphContainer1" style= "width: 90%"></div>
</div>
<div id = "tab2" style = "display:none">
<div id="graphContainer2" style= "width: 60%"></div>
</div>
.ui-tabs .ui-tabs-hide在您的样式表中，将类选择器的规则替换为
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
解决方案取自：jQuery UI - Tabs