web-dev-qa-db-ja.com

金額データでテーブルをフォーマットする方法は?

収益データを表に表示する必要があるWebアプリを開発していますが、読みやすくする方法がわかりません。

私に役立つスタイルガイドやマニュアルはありますか?

  • たとえば、ゼロ値に関するルールは何ですか? nダッシュ、ゼロ、またはセルを空のままにする必要がありますか?

  • ドル記号を取り除く必要がありますか、それとも「合計」列/行にそのまま残しますか?

  • $ 1未満の数値の場合、ゼロを省略して0.31を.31にできますか?合計にも同じ規則が適用されますか?

http://jsfiddle.net/fTBtH/

Date    Foo     Bar     Total
Jan 23  $0.31   $0.00   $0.31
Jan 24  $0.01   $9.06   $9.07
Jan 25  $0.10   $0.00   $0.10
Jan 26  $0.00   $0.04   $0.04
Total   $0.42   $9.10   $9.52
6
Evgeny

私は包括的な 効果的なデータテーブルを設計するためのガイド を作成しました。

視覚的な例がたくさんある長い記事です。セクションは次のとおりです。

1)聴衆の期待に応える

2)テーブルの目的に合わせてデータを注文する

3)混乱を取り除く

4)視覚的な階層を作成する

5)数値を丸めて質問を避ける

6)ユーザーの計算を実行する

7)一貫した外観を提供する

8)整列

9)フィギュアとグラウンドを分離

10)列の数を減らす

11)比較を簡単にする

12)類似データをグループ化する

13)グリッドを有効活用する

14)重要な値を強調表示します

15)簡単な口頭での解説を提供する

16)空白を使う

17)意味のあるラベルを使用し、見出しを管理する

以下の優れた例は、イングランド銀行の年次報告書2010に基づいています。

あなたは彼らが通貨(そして数百万)を取り出しているのを見ることができます。ゼロと右揃え(ダッシュを含む)にはダッシュを使用します。

通常、一部の値が1.0より大きい場合は、先頭のゼロを含めますが、先頭のゼロを削除する場合は、どこでもそれを実行します-混ぜて一致させないでください。

enter image description here

7
Roger Attrill

まず最初に、一貫性を保つために、データを表示する方法を選択し、常に同じ方法で表示する必要があります。次に:

  • 金額データを右側に揃えます。これにより、値が他の値よりも大きいかどうかを簡単に比較できます
  • 小数点と一致している。 2つの10進値を表示することを選択した場合は、常にそれらを表示します。
  • 列に金額のみが表示される場合は、「$」を削除してその情報を列ヘッダーに追加できます(例:「Bar in Dollars」、「Bar($)」、...)
  • 「0.31」の場合は「0」を省略すべきではないと思います

また、解決しようとしている問題についてすでに考えているアプリでインスピレーションを求めることもできます。いくつかのパターンがあるという結論に達すると思いますが、すべてのアプリの動作は異なります。以下は、あなたに似た画面のスクリーンショットです

5
jff

作る [〜#〜] dry [〜#〜] 。これが$の価格であることをユーザーが知っている場合は、繰り返す必要はありません(ヘッダーにドルを入れることができます)。 0未満の数値については、言うのは難しい。実際の例で読みやすさを確認してください。ただし、0を使用するほうが自然です。

3
Grzegorz Gajos

通貨記号を繰り返さない

通貨記号は、私たちの目が数字の表を読むときにとる道に沿った岩です。一連のデータ値からそれらを省略します。

Total ($)などの通貨記号を列ヘッダーに埋め込みます。

さらに良いことに、コンテキストに曖昧さがある可能性がある場合は、通貨に 文字の標準ISO 4217コード を埋め込みます。たとえば、USDは米ドルで、CADはカナダドルで、どちらも同じ記号$を使用しています。

単一の値、または無関係な数値の束の場合は、混乱や曖昧さを避けるために通貨記号を含めます。

専門的に作成された会計報告書または四半期ごとの企業/ 年次報告書 をご覧ください。すべての数値で繰り返し使用されるドル記号は表示されません。

ゼロを抑制

ゼロの表示を抑制する方法に関する明確な規則はありません。出版物のスタイルガイドはこの点で異なります。

通常、次のいずれかです。

  • 空のテキスト(何も表示されていません)
  • ハイフン-マイナス (-)(Unicode&ASCII:U + 002D)
  • EN DASH (–)(Unicode:U + 2013)
  • EM DASH (—)(Unicode:U + 2014)
  • 白い背景の薄い灰色のようなかすかな色のゼロ。

ほとんどのフォントでは、emダッシュは最も広く、enダッシュは中程度の幅で、ハイフンは最も狭いです。

個人的には、私の好みでは、エンダッシュが最も効果的です。数字のフィールドでは、エンダッシュ文字を簡単に見ています。 emダッシュはあまりにも目立ちますが、視覚的なスピードバンプです。一方、空のテキストは、欠けているデータに注意を向けているので緊張します。

低い値の省略

これは完全に組織のポリシーに依存します。お金や科学的読み値などの重要なデータがある場合は、ポリシーの書面による文書または許可を得ます。法的またはその他の影響がある場合は、非難されたくありません。

凡例または表記法でデータの丸め/省略を読者に開示することを選択できます。

一般的に言えば、他の値に表示される解像度に該当する特定の値は省略しません。例として、0.31の類似のインスタンスを表示しながら、9.07を省略しません。 .07の部分は、その列のすべての数値が小数点第2位までの値を表すため、誤解を招く可能性があります。したがって、09または0.319.07のどちらかを使用します。

丸め

rounding の場合、数字を切り捨てるのではなく、おそらく子供として教えられた「校舎の丸め」方法(5を切り上げる)は数学的に正しくないことに注意してください。 5はハイとローの中間のスマックです。この関係を断ち切る完璧な方法はありません。簿記係はしばしば「銀行の丸め」を使用することに注意してください。より正確には 丸めの半分から偶数 として記述され、偶数に向かって切り上げまたは切り下げられます。

2
Basil Bourque