勉強したことのメモ

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

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

   

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

 

サンプル

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

 

ソース

 

参考サイト

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

 

所感

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

 - JavaScript

  関連記事

javascript:void(0)について

よく使う<a href="javascript:void(0)" oncl ...

alert後にページ遷移

JavaScriptのalertが閉じたらページ遷移させてほしいと言われ、con ...

IE&javascriptの予約語

前にもひっかかった問題で、今日同じことで 時間をとられたのでメモ。 予約語? っ ...

JavaScriptで多次元連想配列

JavaScriptで多次元の配列を作る際にいつも迷ってしまうのでメモ。 ■こう ...

画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...

JavaScriptでフォームの禁止ワード制限

掲示板等で本文を送信する際に、予め定めていた禁止ワードが含まれていないかチェック ...

無料でジオコーディング(住所→経度緯度)を行う

GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...

GoogleMapAPIでジオコーディングできない

住所から経度緯度を取得するジオコーディングをGoogleMapAPIを用いて行お ...

youtubeの埋め込みをポップアップ表示させる方法

youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...

jQuery Nice Selectを特定ページのみ無効にしたい

bootstrap系のテンプレートデザインを使用したサイトを構築中に、セレクトメ ...