Glean 拾遗
日刊 /2026-09-29 / TanStack 推出 Charts:用图形语法取代图表类型,gzip 后仅 29 kB

TanStack 推出 Charts:用图形语法取代图表类型,gzip 后仅 29 kB

原文 www.infoq.com 收录 2026-09-29 06:00 阅读 3 min
AI 解读

TanStack 团队发布 Charts,一个框架无关的 TypeScript 图形语法库,目前仍处 Alpha,周下载量已约 16 万。它不提供固定的图表组件目录,而是沿用 Leland Wilkinson 的图形语法传统,由开发者组合 marks、scales、channels、transforms 与 layers;类型推导与源数据行保持关联,同一份定义可通过 adapter 渲染到 React、Preact、Vue、Solid、Svelte、Angular、Lit 及原生 DOM,服务端与浏览器均可运行。体积上,基础 React 折线图 gzip 后约 29 kB,官方自测套件 38–45 KiB,低于 Chart.js(45–58 KiB)、Observable Plot(83–92 KiB)与 ECharts(153–173 KiB)。稳定性指南明确 Alpha 不等于 API 承诺,建议锁定精确版本,仓库也声明尚不适合生产环境;大数据实时场景仍建议改用硬件加速渲染方案。作者 Linsley 称实现几乎全部由 AI coding agent 在其监督下生成。适合前端与 TypeScript 数据可视化工程师评估选型。

原文 3 分钟
原文 www.infoq.com ↗
§ 1

TanStack Charts, the newest library from Tanner Linsley and the TanStack team, has arrived as a framework-agnostic visualization grammar for TypeScript, and it is already pulling roughly 160,000 weekly downloads while still officially in Alpha.

Tanner Linsley 和 TanStack 团队的新库 TanStack Charts 已经面世,它是一个面向 TypeScript、不绑定具体框架的可视化语法库。尽管官方状态仍是 Alpha,每周下载量却已经有约 16 万次。

§ 2

Rather than shipping a fixed catalogue of chart components, TanStack Charts adopts the grammar of graphics tradition established by Leland Wilkinson. Developers compose marks, scales, channels, transforms, and layers instead of picking a chart "type". The runtime is an independent implementation, although its marks-and-channels API is closest to Observable Plot. A defining detail is that inferred types stay connected to the source row, so each mark reads directly from your data shape. The same definition renders through adapters for React, Preact, Vue, Solid, Svelte, Angular, Lit, and a vanilla DOM host, on the server or in the browser.

TanStack Charts 没有提供一份固定的图表组件清单,而是继承了 Leland Wilkinson 开创的图形语法(grammar of graphics)传统。开发者通过组合 mark、scale、channel、transform 和 layer 来搭图表,而不是去挑一个“图表类型”。它的运行时是独立实现的,但 marks-and-channels API 最接近 Observable Plot。一个很关键的细节是:推断出来的类型始终与源数据行保持关联,所以每个 mark 都直接读取你的数据结构。同一份定义可以借助适配器在 React、Preact、Vue、Solid、Svelte、Angular、Lit 以及原生 DOM 宿主中渲染,服务端和浏览器端都行。

§ 3

Installation is a single package, pnpm add @tanstack/charts, with react and react-dom added as peers for the React adapter, as covered in the installation docs.

安装只要一个包,pnpm add @tanstack/charts;用 React 适配器的话,再把 react 和 react-dom 作为 peer 依赖装上,具体见安装文档。

§ 4

On Reddit, users are excited, with one commenting on the TypeScript experience:

The guy breathes typescript. The developer experience of all the tan stack libraries is phenomenal!

Another asked about React Native support:

React Native support please! The state of chart libraries in RN is abysmal

Linsley himself replied:

We have an experimental RN adapter. Give it a try! It's in the docs.

Reddit 上讨论很热烈。有人专门夸 TypeScript 体验:

“这哥们儿简直是用 TypeScript 呼吸的。TanStack 全家桶的开发体验都好得离谱!”

也有人来问 React Native 支持:

“求支持 React Native!RN 的图表库生态简直惨不忍睹。”

Linsley 本人回复:

“我们有一个实验性的 RN 适配器,试试看!文档里就有。”

§ 5

In the release tweet, Linsley described it as "the charting library I always dreamed of". He also marked the official move to Alpha with 11 releases, 188 examples, a full shadcn chart catalog, multiple axes, polar scales, and drillable sunbursts. YouTube walkthroughs such as "TanStack Did It Again... They Fixed Charts" have amplified the launch.

在发布推文里,Linsley 称它是“我一直梦想拥有的图表库”。他同时列出了正式迈入 Alpha 的成果:11 个发布版本、188 个示例、一整套路 shadcn 图表目录、多种坐标轴、极坐标尺度,以及可以下钻的旭日图。YouTube 上《TanStack Did It Again... They Fixed Charts》这样的讲解视频,又给这次发布添了一把火。

§ 6

One detail from the launch worth paying attention to is how the library was built. Linsley states on the GitHub page that "almost all of the implementation was produced with AI coding agents under my direct supervision", then reviewed and accepted into the project.

这次发布有一点值得留意:这个库是怎么写出来的。Linsley 在 GitHub 页面上写道,“几乎所有实现都是在我的直接监督下由 AI 编码 agent 产出的”,之后再由他审阅并合入项目。

§ 7

A comparison from SciChart, a commercial competitor, argued that TanStack is "often better suited for simpler chart creations that don't require huge, complex data sets to be processed in real-time", steering heavy real-time workloads toward hardware accelerated renderers. The project's own large data guide is candid on the same point, noting that Canvas removes SVG DOM cost but not scale, guide, or scene compilation work.

商业竞品 SciChart 的对比文章认为,TanStack“往往更适合那些不需要实时处理庞大复杂数据集的简单图表”,并把重度实时负载引向硬件加速渲染器。项目自己的大数据指南在这一点上同样坦率:Canvas 省掉了 SVG 的 DOM 开销,但 scale、guide 和场景编译这些工作量并不会消失。

§ 8

A basic React line chart weighs about 29 kB minified and gzipped, and the project's own comparison puts its controlled suite around 38 to 45 KiB, against roughly 45 to 58 KiB for Chart.js, 83 to 92 KiB for Observable Plot, 153 to 173 KiB for Apache ECharts, and far larger figures for AG Charts.

一个基础的 React 折线图压缩后(minified + gzip)约 29 kB。按项目自己的对比,它的受控组件套件大约在 38–45 KiB,而 Chart.js 约 45–58 KiB、Observable Plot 83–92 KiB、Apache ECharts 153–173 KiB,AG Charts 还要大得多。

§ 9

The stability guide states that Alpha "is not a stable API promise" and advises pinning an exact version, and the repository still warns that it is not ready for production. Teams moving across should read the migration guide.

稳定性指南明确说明,Alpha“并不等于稳定的 API 承诺”,建议锁定确切版本;仓库也仍在提示它尚未可用于生产环境。打算迁移过来的团队,应当先读迁移指南。

§ 10

TanStack is the family of open source, headless, type-safe libraries created by Tanner Linsley, spanning Query, Table, Router, Form, and the full-stack Start framework, and depended on across millions of applications. Charts extends that headless approach to data visualization. It is released under the MIT license and free to use.

TanStack 是 Tanner Linsley 打造的一整套开源、headless、类型安全的库,涵盖 Query、Table、Router、Form 以及全栈框架 Start,被数百万应用所依赖。Charts 把这种 headless 思路延伸到了数据可视化。它基于 MIT 许可发布,可免费使用。

打开原文 ↗