我解决了一个问题并创造了另一个问题。
我在jQuery UI选项卡中有2个Highchart图表。最初,在调整浏览器窗口大小时,HIDDEN选项卡中的图表不会调整其宽度。我用这段代码解决了这个问题:
$( "#jQTab" ).on(
"tabsactivate",
function( event, ui ) {
if(ui.newPanel[0].id == "jQTab_1") { var chart = $('#container_1').highcharts();
chart.update({ chart: { renderTo: 'jQTab_1', width: $('#jQTab_1').width() } });
}
if(ui.newPanel[0].id == "jQTab_2") { var chart = $('#container_2').highcharts();
chart.update({ chart: { renderTo: 'jQTab_2', width: $('#jQTab_2').width() } });
}
}
);
但这造成了第二个问题。现在,当浏览器窗口的宽度发生变化时,VISIBLE图表不会改变其宽度。
这是完整的代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highcharts Resizing Issues in JQuery Tabs</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
$( "#jQTab" ).tabs();
var chart_1 = Highcharts.chart('container_1', { title: { text: 'Chart.update' }, subtitle: { text: 'Plain' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ type: 'column', colorByPoint: true, data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], showInLegend: false }] });
var chart_2 = Highcharts.chart('container_2', { title: { text: 'Chart.update' }, subtitle: { text: 'Plain' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ type: 'column', colorByPoint: true, data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], showInLegend: false }] });
$( "#jQTab" ).on(
"tabsactivate",
function( event, ui ) {
if(ui.newPanel[0].id == "jQTab_1") { var chart = $('#container_1').highcharts();
chart.update({ chart: { renderTo: 'jQTab_1', width: $('#jQTab_1').width() } });
}
if(ui.newPanel[0].id == "jQTab_2") { var chart = $('#container_2').highcharts();
chart.update({ chart: { renderTo: 'jQTab_2', width: $('#jQTab_2').width() } });
}
}
);
});
</script>
</head>
<body>
<div id="jQTab">
<ul>
<li><a href="#jQTab_1">Tab 1</a></li>
<li><a href="#jQTab_2">Tab 2</a></li>
</ul>
<div id="jQTab_1"> <div id="container_1"></div></div>
<div id="jQTab_2"> <div id="container_2"></div></div>
</div>
</body>
</html>
答案 0 :(得分:1)
您可以使用chart.reflow()代替明确设置宽度。
$("#jQTab").on(
"tabsactivate",
function(event, ui) {
if (ui.newPanel[0].id == "jQTab_1") {
var chart = $('#container_1').highcharts();
chart.reflow();
}
if (ui.newPanel[0].id == "jQTab_2") {
var chart = $('#container_2').highcharts();
chart.reflow();
}
}
);