Highcharts.jsで表示を切り替えるとグラフが消える

Highcharts.jsで複数のグラフをタブ切り替えしようとしたときに少し詰まったのでメモ。

サンプルコード

displayで切り替えると中のグラフに何か影響が出るかと思い、visibility: hidden; とposition: absolute で非表示にしてみました。

HTML

<ul id="tab-switch">
	<li><a href="#graph01">棒グラフ</a></li>
	<li><a href="#graph02">円グラフ</a></li>
	<li><a href="#graph03">折れ線グラフ</a></li>
</ul>
<div id="tab-contents">
	<div id="graph01"></div>
	<div id="graph02"></div>
	<div id="graph03"></div>
</div>

CSS

#graph01, #graph02, #graph03 {
	width: 600px;
	height: 400px;
}
#graph02, #graph03 {
	visibility: hidden;
}

JavaScript

グラフ部分の記述は省いて、タブ切り替えのみ抜粋しています。

// タブの切り替え用
$('#tab-switch a').on('click', function() {
	$('#tab-contents > div').css({
		position: 'absolute',
		visibility: 'hidden'
	});
	$($(this).attr('href')).css({
		position: 'relative',
		visibility: 'visible'
	});
	return false;
});

最初の表示は問題ないのですが、何度かタブを切り替えていると、棒グラフと折れ線グラフの表示が以下のようになってしまいました。
(グラフにオンマウスすると元に戻ります。)

グラフの表示がおかしくなるデモページ
　

サンプルコード2

visibilityではなくdisplayで切り替えると問題ありませんでした。

CSS

#graph02, #graph03 {
	display: none;
}

JavaScript

// タブの切り替え用
$('#tab-switch a').on('click', function() {
	$('#tab-contents > div').hide();
	$($(this).attr('href')).show();
	return false;
});

displayで切り替える場合のデモページ
　

もしくは、タブ内のサイズが同じ場合はposition: absolute; で重ねてz-indexで重なり順変更でも問題ありませんでした。

CSS

#tab-contents {
	position: relative;
	width: 600px;
	height: 400px;
}
#graph01, #graph02, #graph03 {
	position: absolute;
	top: 0;
	left: 0;
	width: 600px;
	height: 400px;
}

JavaScript

	// タブの切り替え用
	$('#graph01').css({
		zIndex: 10
	})
	$('#tab-switch a').on('click', function() {
		$('#tab-contents > div').removeAttr('style');
		$($(this).attr('href')).css({
			zIndex: 10
		});
		return false;
	});

z-indexで切り替える場合のデモページ