chart

チャート

読者が比較すべき数値は、文章ではなくチャートにします。ページでは、フレームワークが提供するブロック <Chart /> を使って描画します。これは Recharts 上の shadcn のチャートコンポーネントで、ブランドカラーの --chart-1 から --chart-5 で描画され、ホバー時にツールチップを表示し、系列が複数ある場合は凡例を表示します。

<Chart
  type="bar"
  x="month"
  data={[
    { month: "Apr", saves: 186, builds: 80 },
    { month: "May", saves: 305, builds: 200 }
  ]}
  series={{ saves: "Studio saves", builds: "Publication builds" }}
  caption="Studio saves and publication builds per month, from the studio's commit log."
/>

質問から種類を選ぶ

読者の質問	種類	Props
どう比較できますか？最も大きいのはどれですか？	bar	ラベルが長い場合、または8個を超える場合は horizontal
時間の経過とともにどう変化しましたか？	line	系列は1～3個
時間の経過とともに合計とその内訳はどう変化しましたか？	area	stacked
この合計の内訳は何ですか？	bar, stacked	1つの全体を構成する内訳が2～4個の場合に限り、円グラフ
同じ基準で2つまたは3つの項目をどう評価できますか？	radar	基準は3～8個

前後の比較には、前と後の2つの系列を持つ bar を使います。順位付けには、行を大きい順に並べた bar を使います。どの質問にも当てはまらない場合は、このブロックではありません。ウォーターフォール、サンキー、傾斜グラフ、またはデータ上の項目に注釈が必要なチャートは、figure スキルで描画します。

データを記述する

• x は各行のラベルとなるフィールドを指定します。月、ページ、ホストなどです。
• data は行の配列で、ラベルごとにオブジェクトを1つずつ指定します。数値は文字列ではなく数値にし、各行にすべての系列を含めます。
• series は、プロットする各フィールドをラベルに対応付けます。色の順序はここで決まり、最初の系列は --chart-1 になります。ページの主題となる系列を先頭に置きます。最大5系列までです。それを超えると色を見分けにくくなります。
• unit は値軸に付加します。例：unit="ms"。数値に単位がある場合は必ず使います。
• caption には、チャートが示す内容と数値の出典を記します。
• Props はページ内のほかの箇所と同様、リテラル値にします。計算は行われないため、値を入れる前に並べ替え、丸め、合計を済ませます。

円グラフでは1つの系列をプロットし、各行に色を付けます。それ以外の種類では、各系列に色を付けます。

誠実さを保つ

• 実際の数値だけを使います。架空のデータを使ったチャートは、証拠を装った図です。数値が説明用であれば、キャプションにその旨を記します。
• 読者に必要な精度に丸めます。211.73 ms ではなく、212 ms とします。
• チャート1つにつき、要点は1つです。キャプションに「そして」が必要なら、チャートは2つに分けます。
• そばに添える文章で、要点を言葉で伝えます。「5月の保存数は7月の2倍でした。」チャートはその裏付けであり、要点を伝える唯一の場所ではありません。

確認する

チャートはブラウザーで描画されるため、図のレンダリングスクリプトでは描画されません。スタジオまたはローカルプレビューでページを開き、両方のカラーモードで確認してから、項目にホバーしてツールチップを表示します。リテラルでない prop があると、コンパイル時にページが失敗し、その理由が該当箇所に表示されます。