サイト制作に関するメモ書き

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

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;
});

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

graph-disappears-when-you-switch-the-display-in-highcharts01

graph-disappears-when-you-switch-the-display-in-highcharts02

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

サンプルコード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で切り替える場合のデモページ
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP