工芸

一目で

ゆったり密度

濃いマスほど、このテーマでその指標が高いことを示します。

明瞭85

説得60

密度48

制作コスト28

課題適合86

仕事適合88

低高

Chart.js クイック チャートは小さな構成オブジェクトからキャンバスに描画されたマークとして値を載せます。Chart.js が Web のデフォルトの MIT スターター チャートになりました。

業務報告・広告・課題では「内部ツール、学生の Web プロジェクト、軽量のマーケティング ページ」に向く。「マップ、サンキー、または出版グレードのベクトルのエクスポートのみが必要です」のときは別の形を選ぶ。

規則

• 規則 1 — 小さな構成オブジェクトからキャンバスに描画されたマークは一つのチャネルだけに使う。
• 規則 2 — 直接ラベルは遠い凡例に勝つ。
• 規則 3 — ゼロを隠さない。軸を切ったら宣言する。
• 規則 4 — 色はカテゴリか大きさか、どちらか一方。
• 規則 5 — タイトルに主張を書く。「Chart.js クイック チャート」だけにしない。
• 規則 6 — 出典と期間は小さくても書く。

パレット

• パレット 1 — カテゴリは区別できる色。連続は一色の明度。
• パレット 2 — 発散は中央を中立、両端だけ強調。
• パレット 3 — ブランド色ひとつと灰色の方が虹より強い。
• パレット 4 — プロジェクターとグレースケール印刷でコントラストを確認。

文字

• 文字 1 — 数値は表形式数字。本文フォントをチャートに流し込まない。
• 文字 2 — タイトルは文、軸は短い名詞。
• 文字 3 — 日本語は太さを一段下げ、字間を空ける。

Chart.js クイック チャート: 小さな構成オブジェクトからキャンバスに描画されたマークを守り、「マップ、サンキー、または出版グレードのベクトルのエクスポートのみが必要です」のときは別の図を選ぶ。

← いつ使う Chart.js クイック チャート 失敗 →