勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Chart.jsで横スクロール可能なグラフを表示させる方法

   2024/01/16  JavaScript

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ページが表示された。グラフをスマホ対応させるのは中々難しいのかもしれない。

 - JavaScript

  関連記事

サイトをダークモード対応させる「Darkmode.js」ライブラリの利用方法

サイトをダークモード対応させる場合、CSSで色々指定しないといけないと思っていた ...

ブラウザ開発者ツールの起動を検出しソースコード変更やリダイレクト設定できる「console-ban」ライブラリの利用方法

他サイトのソースコードを拝見するため開発者ツールを開こうとすると、偶に「デバッガ ...

jQueryの「DateTimePicker」プラグインで日付や時間選択時に指定したイベントを実行させる方法

jQueryの「DateTimePicker」プラグインで日付や時間選択時、あら ...

PHPで画像を分割し並べ替えて出力したものをJavaScriptで復元する方法

ある電子書籍サイトをブラウザの開発者ツールで見てみたところ、PHPでページ画像を ...

JavaScriptで日時のフォーマットをISO 8601型とDateTime型を相互に変換する方法

先日PHPで日時のフォーマットをISO 8601型とDateTime型を相互に変 ...