Chart
チャート
チャートはデータを絵にするよ。比べたり、傾向を見せたり、範囲を見せたり、つながりを示したりできるんだ。
実際の例
週間の折れ線グラフは、増えていくバックログを浮き彫りにします。表は、画面読み上げソフトや監査のために正確な数値を提供します。
主な部分
- 01データマーク
- 02スケールと軸
- 03ラベルと凡例
以下の場合に使用します
まず質問を明示しましょう。次に必要な比較が明確になるチャートを選びます。
以下の場合は使用しないでください
3D装飾、誤解を招く軸、色だけの差異、簡単な数値を隠すグラフを避けてください。
コードで使用する名前
scale + mark + axis + legend + data table 出荷前に
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome：Complete the task with チャート (Chart)。 User context：週間の折れ線グラフは、増えていくバックログを浮き彫りにします。表は、画面読み上げソフトや監査のために正確な数値を提供します。 Recommended pattern：チャート (Chart)。 Why it fits：まず質問を明示しましょう。次に必要な比較が明確になるチャートを選びます。 Do not use it when：3D装飾、誤解を招く軸、色だけの差異、簡単な数値を隠すグラフを避けてください。 Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary)：単一の公式標準が全体の用語を管理するわけではありません。その意味はチーム、プラットフォーム、またはフレームワークによって変わる可能性があります。 Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
このリクエストを確認する
Review how チャート (Chart) is used now. Definition: チャートはデータを絵にするよ。比べたり、傾向を見せたり、範囲を見せたり、つながりを示したりできるんだ。 Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.