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ページが表示された。グラフをスマホ対応させるのは中々難しいのかもしれない。
関連記事
ラジオボタンのカスタムデータ属性を取得し、特定の値の場合はチェックさせない方法
ASPを使用したサイトで特定のradioボタンは選択不可にしたいというケースがあ ...
leaflet.jsとOSMでマーカーの画像をそれぞれ指定する
leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し ...
JavaScriptで配列をループ処理(for-in)
JavaScriptでforeach使ったこと無かったけど、 配列のキーが連番じ ...
formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)
フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...
JavaScriptで三項演算子の中に三項演算子
既存のソースを作り変えている際によく分からないソースがあった。 だいぶ書き換えて ...