UI

前月対比・前日対比のグラフ表示において、できるだけ小さい面積で数字もビジュアルも満たす…

はじめに

初見ではムムムとなると思いますが、慣れると..?
個人差あると思いますので、一つのアイデアとして見てください。

実装例

sample.png

今回は、前月対比を例に説明します。

比較する基準日を変更できるようにする

今日が2016/02/03ですが、まだ19時です。24時までの数値をもとにいろいろ比較しなければ正確とは言えません。ですので、基準日を「1日前」というように変更することができるようにしています。
今回の場合、基準日は2016/02/02ということになります。

前月の全体を表示する

オレンジのグラフの3,318,610,572の部分です。
これで、前月全体と今月の基準日までの数値を比較できるようになります。

前月の基準日までを表示する

今月の基準日は2016/02/02ですので、前月の基準日を2016/01/02とし、前月1日から前月の基準日までを表示します。
オレンジのグラフの409,293,166の部分です。
これで、前月の基準日までと今月の基準日までの数値を比較できるようになります。

今月の基準日までを表示する

オレンジのグラフの409,927,835の部分です。


ここまでで主要な数値が出そろいました。
あとは、(1)~(3)までの数値を使っていきます。
あともう少しです。


前月全体に対する今月基準日までの進捗率

オレンジのグラフの12.35%-2,908,682,737の部分です。
進捗率、下振れ・上振れしている数量を表示するとともに、細いバーで率のイメージも伝えます。

前月基準日と今月基準日までの比較

オレンジのグラフの100.16%+634,669の部分です。
進捗率、下振れ・上振れしている数量を表示するとともに、細いバーで率のイメージも伝えます。

さいごに

前日対比、については前月対比の月と日の概念を、日と時間におきかえただけです。

Webツールも公開しています。
Web便利ツール@ツールタロウ

スポンサーリンク