Chart.jsで横スクロール可能なグラフを表示させる方法
2024/01/16
Chart.jsで折れ線グラフを表示するページがあった。過去1年分のデータをグラフ化させるといったもので表示件数が多く、PCでは問題なかったもののスマホでは非常に見づらい表示となった。そのためディスプレイ幅に応じてグラフに横スクロール機能をつけたかった。以下に対応方法をメモ。
サンプル
https://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ページが表示された。グラフをスマホ対応させるのは中々難しいのかもしれない。
関連記事
-
-
Dexie.jsを利用してIndexedDBを取り扱う方法
IndexedDBを用いて色々するという案件を見かけたが、そもそもIndexed ...
-
-
Android2.3でJavaScriptのエラー
Android2.3で関数が動かないといったエラーが発生していた。 担当外だった ...
-
-
ajaxで複数のデータを渡したい
やりたい事はajaxで複数のデータを渡したい。 ■送信側 var data = ...
-
-
Leafletで表示したマップにジェスチャーハンドリングを追加する方法(Leaflet.GestureHandling)
GoogleMapをズームする際にPCだと「Ctrl＋スクロール」、スマホだと「 ...
-
-
クロスドメインのiframeで子フレームから親フレームにheightの値を渡す
やりたかった事は、 ・iframeで子フレームから親フレームにheightの値を ...