web-dev-qa-db-ja.com

Webページで数値の目を引く表示を作成する最良の方法は何ですか?

合計とカウントを表示するための管理レベル監視ページを設計します。相互作用は許可されておらず、マネージャービューの大きなLCDの監視ページとして使用されます。プロジェクトはjQueryを使用するWebベースのアプリケーションです。設計するためのアイデアを探していますこのページ。金額は、グラフやゲージには適していませんが、生のテキストとして表示したくありません。目を引くようにするための何らかのグラフィックスが意図されています。

Webページで数値の目を引く表示を作成する最良の方法は何ですか?

8
Farshid Zaker

データの性質に応じて、 Tufte's Sparklines を使用できます。このアプローチは、テキスト、色、小さなグラフィックを組み合わせたものです。 Googleアナリティクスでは、コントロールパネルでこのアプローチを利用しています。

enter image description here

13
Pau Giner

Mailchimp、Twitter、Zendeskなどの他のWebサービスからの情報を監視するために使用できるオンラインサービス Ducksboard をご覧ください。さまざまな種類の情報を表示する方法について、いくつかのヒントを得ています。グラフ、大きな数値表示、スパークライン、および天気、時間などの特定のデータ形式をグラフィカルに使用.

ここでデモを試す できます。

4
Rahul

私の優先するアプローチは大きな数であり、それは以下の小さなテキストで意味があります。合計の場合は、値を合計に結合するフローチャートを作成できます。カウントはゲージで機能するように聞こえますが、最大値が必要です。それ以外の場合は、「スティック」を使用できます。紙の上で行うように、5番目のスティックを横切ります。高い値が良いか悪いかによって異なります。また、ポーギナーの回答で言及されているタフテのスパークラインなど、他の視覚化との連携も優れています。

StackExchangeはこれをリストの質問の横に使用し、「X票」と「Y回答」を使用します。

enter image description here

これを シンプルなReadItLater統計サイト で使用しました:

enter image description here

1
John-Philip

ラベルと値の間でテキストを繰り返し変形するものについては、サイズ、色、線の太さ、塗りつぶしのスタイルを自由に設定できます。

たとえば、(素晴らしい)Raphael.jsを使用してこれを行うことができます- テキストモーフィングのデモ を参照してください-一連の文字または数字を入力し、各文字間にモーフの形状を入力します。それは十分に「目を引く」ものでなければなりません。

0
Roger Attrill