chart

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	标签较长或超过八个时使用 horizontal
随时间发生了什么变化？	line	一个到三个系列
总量及其组成部分随时间发生了什么变化？	area	stacked
这个总量由哪些部分组成？	bar、stacked	只有在展示一个整体的两个到四个部分时才用饼图
两三个事物在相同标准上的得分如何？	radar	三到八个标准

展示前后对比时，使用包含前后两个系列的 bar。展示排名时，使用行按从大到小排序的 bar。如果问题不属于以上任何一种情况，就不该用这个区块：瀑布图、桑基图、坡度图，或需要在数据标记上添加注释的图表，应使用 figure 技能绘制。

编写数据

• x 指定用于标记每一行的字段：月份、页面、主机。
• data 是一个行数组，每个标签对应一个对象。数字必须是数值，不能是字符串，并且每一行都必须包含所有系列。
• series 按颜色的使用顺序，将每个要绘制的字段映射为对应标签：第一个使用 --chart-1。将页面重点关注的系列放在首位。最多五个；超过这个数量后，颜色就无法区分。
• unit 会附加到数值轴上，例如 unit="ms"。只要数字有单位，就应使用它。
• caption 说明图表展示的内容，以及数字的来源。
• 和页面上的其他内容一样，Props 必须是字面值。不会进行任何计算，因此在填入数字前，应先排序、四舍五入并计算总数。

饼图会绘制其唯一系列，并为每一行着色。其他所有类型都会为每个系列着色。

保持准确

• 只使用真实数字。用编造的数据绘制的图表是在冒充证据；如果数字仅用于示意，请在说明文字中注明。
• 按读者所需的精度四舍五入。写 212 ms，而不是 211.73 ms。
• 一张图表表达一个要点。如果说明文字需要用“以及”连接，那就应该拆成两张图表。
• 在图表旁边用文字说明结论：“5 月的保存次数是 7 月的两倍。”图表是证据，而不是表达要点的唯一地方。

检查图表

图表会在浏览器中渲染，因此图形渲染脚本不会绘制它。请在工作室或本地预览中打开页面，检查两种颜色模式，并将鼠标悬停在数据标记上查看工具提示。非字面值的 prop 会导致页面编译失败，页面也会在出错位置说明原因。