勉強したことのメモ

webプログラマが勉強したことのメモ。

Chart.jsで横スクロール可能なグラフを表示

   

Chart.jsで折れ線グラフを表示するページがあった。過去1年分のデータをグラフ化させるといったもので表示件数が多く、PCでは問題なかったもののスマホでは非常に見づらい表示となった。そのためディスプレイ幅に応じてグラフに横スクロール機能をつけたかった。以下に対応方法をメモ。

 

サンプル

http://taitan916.info/sample/chart.js/index2.php

 

ソース

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>chart.js 横スクロール サンプル</title>
</head>
<body>
	<style>
	.chartWrapper{
		position: relative;
		overflow-x: auto;
	}
	.chartContainer{
		height: 250px;
	}
	.graph_canvas{
		position: absolute;
		left: 0;
		top: 0;
	}
	</style>

	<div class="chartWrapper">
		<div class="chartContainer">
			<canvas id="graph" class="graph_canvas"></canvas>
		</div>
	</div>

	<script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
	<script type="text/javascript" src="//github.com/nagix/chartjs-plugin-colorschemes/releases/download/v0.2.0/chartjs-plugin-colorschemes.min.js"></script>
	<script>
	<?php $max_count = 60;?>
	var ctx = document.getElementById("graph").getContext('2d');
	ctx.canvas.height = 250;

	var option = {
		maintainAspectRatio: false,
		legend: {
			display: false,
		}
	}

	var width = <?php echo $max_count;?> * 15;
	if( $(window).width() < width ){
		document.getElementById('graph').style.width = width + "px";
		document.getElementById('graph').style.height = "250px";
		option.responsive = false;
	}

	var myChart = new Chart(ctx, {
		type: 'line',
		data: {
			labels: [
				<?php for( $i = 1; $i < $max_count; $i++ ) echo $i . ',';?>
			],
			datasets: [
				{
					data: [
						<?php for( $i = 1; $i < $max_count; $i++ ) echo rand(20, 50) . ',';?>
					],
				}
			]
		},
		options: option
	});

	</script>

</body>
</html>

 

参考サイト

https://qiita.com/yutake27/items/fa7b1f6b3c7c65e9d69b

 

所感

HTML,CSS,JSで色々設定しないといけないのでけっこう面倒くさいものの、PCではスクロールなし、スマホでは横スクロールありのグラフが表示できた。尚、他サイトではどのように対応しているのか気になったのでスマホからGoogleアナリティクスを閲覧してみたところ、特にスマホ対応しているといったことはなくPCページが表示された。グラフをスマホ対応させるのは中々難しいのかもしれない。

 - JavaScript

  関連記事

マウスオーバーでの画像切り替えをJavaScriptで簡単に対応

マウスが要素にのった際に画像を切り替える処理を入れたかった。多分CSSの管轄なん ...

PHPでAPIを作成しJavaScript(jQuery無し)からリクエストする方法

管理画面等から何らかのデータをMySQLに登録し、そのデータをPHPで作成したA ...

javascriptとPHPで正規表現を使う場合

とりあえず使いそうなのは検索と置換。 ■javascript var str = ...

jQueryのdatetimepickerでスクロールを無効

日時ピッカーのjQuery datetimepickerにて、ピッカーを指定して ...

table内のiframeのheightを最大高さにする

tableのtdの中にリンクがあり、クリックすると td内でiframeが開く。 ...

javascriptで月末日を取得

以前、PHPで月末日を取得したけれども javascriptで月末日を扱いたいケ ...

javascriptで実行時間の測定

var time_test = function(){ var x = 1; f ...

JavaScriptでdisplay:none/blockの切り替え

jQueryだとhide/show使うか、もしくは toggleだけでいいけどJ ...

leaflet.jsとosmでマップ表示及びマーカー設置

GoogleMapAPIを用いたマップ及びマーカー表示にクレジットカード登録が必 ...

セレクトメニューにサジェスト機能をつける(select2)

formのselectメニューで何文字が入力すると候補を絞って表示させるサジェス ...