参考
图表和表格
为草稿选择一个图表库和一个表格库，并用 @chart 和 @table 引用说明你想要的图表或表格。
为设计系统搭配一个图表库和一个表格库，草稿中的所有图表和数据表格都会用它们构建。点击 设计系统 选择器旁边的 图表和表格，然后各选一个，或选择 自定义 npm 包… 使用其他库。
选择库
| 库 | 用途 | 包 |
|---|---|---|
| Recharts | 图表 | recharts@3 |
| Apache ECharts | 图表 | echarts@6, echarts-for-react@3 |
| Chart.js | 图表 | chart.js@4, react-chartjs-2@5 |
| Victory | 图表 | victory@37 |
| MUI X Charts | 图表 | @mui/x-charts@9 |
| TanStack Table | 表格 | @tanstack/react-table@8, @tanstack/react-virtual@3 |
| AG Grid | 表格 | ag-grid-community@36, ag-grid-react@36 |
| MUI X Data Grid | 表格 | @mui/x-data-grid@9 |
| React Data Grid | 表格 | react-data-grid@7（测试版） |
你的选择会随每个原型一起保存，并包含在导出中。更改选择不会开始新的会话，因此你可以中途添加图表库。与自定义设计系统一样，自定义包会在构建之前在 npm 上检查。
引用图表或表格
然后用引用说明你想要什么。输入 @ 和 chart/ 或 table/ 即可查看全部：
- 图表：
@chart/bar、@chart/stacked-bar、@chart/horizontal-bar、@chart/line、@chart/area、@chart/stacked-area、@chart/pie、@chart/donut、@chart/scatter、@chart/radar、@chart/heatmap、@chart/treemap、@chart/funnel、@chart/gauge、@chart/sparkline和@chart/combo（柱形和折线）。 - 表格：
@table/sortable、@table/filterable、@table/paginated、@table/selectable、@table/editable、@table/grouped、@table/expandable、@table/pinned（固定表头和首列）、@table/virtualized（数千行） 和@table/resizable。 一个表格可以同时引用多个：@table/sortable @table/paginated。
每个引用都会告诉模型用库中的哪些部分构建该图表或表格。如果库中没有对应的功能，例如 Recharts 中的热力图，或 AG Grid 免费版中的行分组，模型会以同样的风格用其他方式构建。
与你的设计保持一致
要与你的设计保持一致，请在同一请求中引用一个颜色主题：图表和表格会在浅色和深色模式下采用它的颜色和字体，表格还会采用它的圆角半径和间距。未选择库时，图表会以 SVG 手动绘制，表格使用设计系统自带的表格。