chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Chart

A number the reader should compare belongs in a chart, not a sentence. A page draws one with

<Chart />

, a block the framework provides: shadcn's chart component on Recharts, painted with the brand's

--chart-1

--chart-5

, with a tooltip on hover and a legend when there is more than one series.

mdx

<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."
/>

需要让读者进行比较的数字应当放进图表，而不是句子。页面通过框架提供的

<Chart />

区块来绘制图表：它是基于 Recharts 的 shadcn chart 组件，使用品牌色

--chart-1

至

--chart-5

着色，悬停时显示 tooltip；当存在多个 series 时显示 legend。

mdx

<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."
/>

Pick the type from the question

根据问题选择类型

The reader asks	Type	Props
how do these compare? which is biggest?	`bar`	`horizontal` when the labels are long or there are more than eight
how did it change over time?	`line`	one to three series
how did the total and its parts change over time?	`area`	`stacked`
what are the parts of this total?	`bar` , `stacked`	a pie only for two to four parts of one whole
how do two or three things score on the same criteria?	`radar`	three to eight criteria

Before and after is a

bar

with two series, before and after. A ranking is a

bar

with the rows sorted, biggest first. If none of these is the question, it is not this block: a waterfall, a sankey, a slopegraph or a chart that needs annotation on a mark is drawn by the

figure

skill.

读者提出的问题	类型	Props
这些数据如何比较？哪个最大？	`bar`	标签较长或项目超过八个时使用 `horizontal`
它随时间如何变化？	`line`	一至三个 series
总量及其各部分随时间如何变化？	`area`	`stacked`
总量由哪些部分构成？	`bar` 、 `stacked`	只有一个整体且包含两至四个部分时才使用 `pie`
两或三个事物按相同标准评分表现如何？	`radar`	三至八个标准

前后对比应使用包含“之前”和“之后”两个 series 的

bar

。排名应使用按大小降序排列的

bar

，最大项排在最前。如果问题不属于以上任何一种，就不应使用此区块：waterfall、sankey、slopegraph，或需要在某个标记上进行注释的图表，应由

figure

skill 绘制。

Write the data

编写数据

x
names the field that labels each row: the month, the page, the host.
data
is an array of rows, one object per label. Numbers are numbers, never strings, and every row carries every series.
series
maps each field to plot to its label, in the order the colours go: the first is
```
--chart-1
```
. Put the series the page is about first. Five at most; past that the colours stop being told apart.
unit
is appended to the value axis,
```
unit="ms"
```
. Use it whenever the numbers have one.
caption
says what the chart shows and where the numbers came from.
Props are literal values, as everywhere on a page. Nothing is computed, so sort, round and total the numbers before they go in.

A pie plots its one series and colours each row. Every other type colours each series.

x
指定用于标记每一行的字段，例如月份、页面或主机。
data
是由行组成的数组，每个标签对应一个对象。数字必须是数字，绝不能是字符串，并且每一行都要包含所有 series。
series
将每个要绘制的字段映射到其标签，顺序与颜色对应：第一个使用
```
--chart-1
```
。将页面重点讨论的 series 放在最前。最多五个；超过之后，各颜色便难以区分。
unit
会附加到数值轴上，例如
```
unit="ms"
```
。只要数字带有单位，就应使用它。
caption
说明图表展示什么，以及数字来自哪里。
与页面其他位置一样，Props 必须是字面量值。不会进行任何计算，因此应先排序、取整并汇总数字，然后再填入。

饼图会绘制一个 series，并为每一行着色。其他所有类型则按 series 着色。

Keep it honest

保持数据真实

Real numbers only. A chart of made-up data is a figure pretending to be evidence; if the numbers are illustrative, say so in the caption.
Round to what the reader needs. 212 ms, not 211.73 ms.
One chart, one point. If the caption needs "and", it is two charts.
The prose beside it says the takeaway in words: "May had twice the saves of July." The chart is the proof, not the only place the point is made.

只使用真实数字。用编造数据制作的图表只是伪装成证据的 figure；如果数字仅作示例，应在 caption 中说明。
按读者所需精度取整。例如使用 212 ms，而不是 211.73 ms。
一张图只表达一个观点。如果 caption 需要使用“和”，那就应该拆成两张图。
旁边的文字要用语言说明结论：“五月保存次数是七月的两倍。”图表是证明，而不是唯一传达观点的地方。

Check it

检查

A chart renders in the browser, so the figure render script does not draw it. Open the page in the studio or the local preview, in both colour modes, and hover a mark to see the tooltip. A prop that is not a literal fails the page when it compiles, and the page says why where it stands.

图表在浏览器中渲染，因此 figure render script 不会绘制它。请在 studio 或本地预览中打开页面，切换两种颜色模式，并悬停在标记上查看 tooltip。如果某个 prop 不是字面量，页面在编译时就会失败，并在该位置说明失败原因。