Bootstrap5とCSVファイルをGoogle Chartで読み込んでグラフ表示

スポンサーリンク

私の業務は全体をまとめるような仕事だ。

ただし、今後は私自身がどこかのチームに所属して、開発業務に従事するように 上司から言われた。

 

考えて考えて施策を提案、皆を牽引した事で実現できたのに「実現したから、もう不要」って。

何十年も離れていて、いまさら開発業務で即戦力になれると思えないよ……。

サラリーマンって本当に理不尽だ。

先週末は「Bootstrap」と「Google Chart」で、簡単な自動更新サイトを構築して終わってしまった……。

最近は、Pythonでスクリプトを書くぐらいで、Webサイトを作るモチベーションなんて全く無かった。アイデアも浮かばないし。

でも、前回作成したグラフが、日記を書く目的だけの実装で終わるのは勿体ない。

千葉県内湾(東京湾)の年間釣魚グラフ作成(市原市海づり施設より)
新年度になり、やる気が出ないので調査が進まず、日記の更新が辛くなってきた……。最近では記事を投稿した瞬間から次の日記内容に頭を悩ましている。RSS登録者数13というゴミサイトなのに、胃を痛めて日記更新って……何してるんだろ…...

「釣りサイト」は作りたいと昔から思ってたし、自分自身にも役に立つので作ってみることにした。

 
 

今まで「Chart.js」を使ったグラフ出力の経験があるが「Google Chart」は使ったことがない。

JSのグラフライブラリ・アニメーションライブラリの現状トレンド
JSライブラリは多種多様に存在する。グラフィックライブラリのトレンドグラフィックライブラリは特に多い、多すぎる。FusionCharts 、HighCharts 、 Google Charts 、 Sencha Ex...

1

数年前に確認した時に「Google Chart」の方が「Chart.js」より圧倒的にシェアが高そうだったが、複雑だと思って使わなかった。

趣味では新しいことを経験して成長するために「Google Chart」を使ってみた。

スポンサーリンク

Bootstrap5でサイトを作成する

他にも新しいものを使ってみる。

2021年3月23日、Bootstrap5 beta3 が公開された……らしい。

が、こんなものイチイチ把握してないよ。

まぁ、2020年6月16日にBootstrap5 alphaがリリースされていた事も知らなかったが。

 
 

まだBootstrap3で作ってるサイトだってある。

以前確認した時は、互換性は無いに等しく「3→4」にするとレイアウトがボロボロになった。

今回の「Bootstrap5」を見る限り、レイアウトは崩れるような大きな変更はなさそうだけど……。

  • 1.脱JQUERY
  • 2.INTERNET EXPLORER非サポート
  • 3.ブレークポイント「XXL」追加
  • 4.ガターを細かく設定できるG-*クラス登場
  • 5.CSS カスタムプロパティ (変数) が使える
  • 6.クラス名にも変更がある

実際にBootstrap4で作成した後、「Bootstrap CDN」を使って Bootstrap5に変更してみた。

Bootstrap
The most popular HTML, CSS, and JS library in the world.

マージン対応の「mb/mt」でズレた。さらに、なんか横幅が大きくなった気がする。

更にJQUERYが無くなった事で、依存している場合は厄介な気はする。

Google Chartを使ってCSVを読み込み複合グラフを出力

Bootstrapでサイトのデザインを作成後は、ひたすらJavascriptのカスタマイズ。

あまりJavascriptって書かないんだよね。

でも、少し楽しくなって最終的に次のようなページを作成した。

魚の写真は、このような目的のために自分で撮りためたものと、Wikipedia等からPublic freeを確認して拝借した。

千葉県内湾(検見川浜突堤、千葉港中央埠頭、長浦港)の年間釣果情報

CSVをGoogle Chartで読み込む

ここから残りの内容はGoogle Chartのコード説明なので、不要な人は読まなくて良いだろう。

Google Chartで表示するデータの設定部分は、DataTableのインスタンスを生成して、列の設定・データの追加をする方法のほか、CSV形式のような記述や、JSON形式にも対応している。

因みに「CSV形式のような記述」は次のとおり。

でも、コレジャナイ……。

CSVそのままで読み込めないと、PythonのPandasで出力したデータ形式の変換が必要で面倒だ。

CSVを読み込んで使うには自分で関数を用意する。

まぁ、これ自体はどこかのサイトから、そのまま貰ったものだけど。

複数軸(ComboChart)を表示する

今回は「釣れた魚の数(匹)」と「釣り人数(人)」を左右の軸に表示したい。

ググって「targetAxisIndex: 1」などの指定が必要な事は分かったが、肝心の軸が表示されずに困っていた。

色々と調べて分かったことは、hAxisの複数形がhAxesで この記述が必要だった。

折れ線グラフで人数を表現し、積み上げグラフで魚ごとの匹数を表現している。

Googleチャートの縦軸を整数にする

グラフの軸が人数や引数なのに「3.0」のように小数点が付くのはオカシイ。

縦軸を整数にするには「format: ‘0’」を付ける必要がある。

クリックすると該当する魚名だけのグラフを表示する

これは、ググっても例が無かった。

実現方法を迷った結果、CSVを読み込む時点で不要なデータを削除することにした。

spliceを使って、不要なデータを削除。

何番目の棒がクリックされたか

棒グラフをクリックしたら、そのデータに該当するURLにリンクを貼って飛ばす方法。

ただ、スマホだとクリックしないと「吹き出し文字」が表示されないので、URLに飛ばすUXだと微妙だね。

これは検討はしたけど一旦見送りにした。

[番外] ローディングの画面の作成

自分のスマホで見ると読み込みに10秒ぐらい必要だった。

仕方ないので「くるくる(ローディング)」的な画面を追加した。

最近はCSSメインで実現できるのね、凄い。

イメージ通りな画面ができた。本当は高速化したいけど……。

まとめ

人は来ないと思うが、ターゲットの魚と時期を決める際に自分自身の役に立つので活用しよう。

全国版を作れた良いけどデータが無いな……。

また、写真投稿サイトを作ったり……とも考えた事もあるが、閑古鳥がなくような弱小サイトでは寂しいだけで終わる。

最近は新規サイト作成のアイデアは出てこないなぁ……。

タイトルとURLをコピーしました