InfoQ

TanStack Charts Introduced with a Framework Agnostic Grammar of Graphics for TypeScript

8.5内容质量
TanStack Charts Introduced with a Framework Agnostic Grammar of Graphics for TypeScript

TL;DR · AI 摘要

TanStack Charts 是首个框架无关的 TypeScript 可视化语法库，采用 Leland Wilkinson 语法传统，支持 16 万周下载量，通过 AI 编码代理开发。

核心要点

  • TanStack Charts 采用语法传统，允许组合 marks 和 scales 构建图表而非预定义类型
  • 支持 React/Vue/Svelte 等 8 种框架，React Native 有实验性适配器
  • AI 编码代理开发占比超 90%，用户反馈 TypeScript 体验优于现有库

结构提纲

按章节快速跳转。

  1. §引言

    TanStack Charts 作为框架无关的可视化语法库，已获得 16 万周下载量。

  2. ·核心机制

    基于 Leland Wilkinson 语法传统，通过组合 marks、scales 等构建图表。

  3. ›框架支持

    适配 React/Vue/Svelte 等 8 种框架，包含 React Native 实验性适配器。

  4. ·AI 开发

    90% 代码由 AI 编码代理生成，经人工审核后集成项目。

  5. ›用户反馈

    Reddit 用户称赞其 TypeScript 体验，认为优于现有图表库。

  6. ·行业比较

    SciChart 认为其更适合简单图表，复杂实时数据需硬件加速方案。

思维导图

用一张图看清主题之间的关系。

查看大纲文本（无障碍 / 无 JS 友好）
  • TanStack Charts
    • 核心机制
      • Leland Wilkinson 语法传统
      • marks/scales 组合构建
    • 框架支持
      • React/Vue/Svelte/8 种框架
      • React Native 实验适配器
    • 开发方式
      • AI 编码代理开发
      • 人工审核集成

金句 / Highlights

值得收藏与分享的关键句。

#TypeScript#图表库#框架无关#AI开发#前端
打开原文

TanStack 图表库推出：面向 TypeScript 的框架无关图形语法 - InfoQ

InfoQ 首页 News TanStack 图表库推出：面向 TypeScript 的框架无关图形语法

Web 开发

QCon 旧金山（11 月 16-20 日）：深度技术会议。改变你思维方式的同行对话。

TanStack 图表库推出：面向 TypeScript 的框架无关图形语法

2026 年 9 月 17 日 2 分钟阅读

作者：

  • Daniel Curtis

#### 关注我们

YouTube

232K 粉丝

LinkedIn

26K 粉丝

Instagram

新

RSS

19K 读者

X

57.1k 粉丝

Facebook

21K 喜欢

Bluesky

收听本文 -

0:00

音频准备就绪

您的浏览器不支持音频元素。

正常

1.25x

1.5x

喜欢

新下拉阅读列表

  • 阅读列表

由 Tanner Linsley 和 TanStack 团队推出的 TanStack 图表库，作为面向 TypeScript 的框架无关可视化图形语法正式发布。目前该库仍处于官方 Alpha 阶段，但已实现约 16 万次每周下载量。

不同于提供固定图表组件目录的方式，TanStack 图表库采用 Leland Wilkinson 建立的图形语法传统。开发者通过组合标记（marks）、比例尺（scales）、通道（channels）、转换（transforms）和图层（layers）来构建图表，而非选择特定的图表"类型"。运行时是一个独立实现，尽管其标记和通道 API 与 Observable Plot 最为接近。一个显著特点是推断类型始终与数据源行保持关联，因此每个标记都可以直接从您的数据结构中读取。相同的定义可通过 React、Preact、Vue、Solid、Svelte、Angular、Lit 以及原生 DOM 主机的适配器，在服务器或浏览器端渲染。

安装只需一个包：pnpm add @tanstack/charts，对于 React 适配器，需要将 react 和 react-dom 作为对等依赖添加，具体请参阅安装文档。

在 Reddit 上，用户对该项目表现出极大热情，有用户评论道：

这位开发者对 TypeScript 的理解非常深入。所有 TanStack 库的开发者体验都非常出色！

另一位用户询问了 React Native 支持情况：

请支持 React Native！目前 React Native 的图表库状态糟糕透顶。

Linsley 本人回复：

我们有一个实验性的 React Native 适配器。不妨一试！相关文档中已有说明。

在发布推文中，Linsley 将其描述为"我梦寐以求的图表库"。他还通过 11 次发布、188 个示例、完整的 shadcn 图表目录、多轴支持、极坐标比例尺和可钻取的旭日图，正式将项目推进到 Alpha 阶段。YouTube 教程视频如"TanStack 再次发力...他们修复了图表"进一步提升了项目关注度。

值得关注的一个细节是该库的构建方式。Linsley 在 GitHub 页面上表示："几乎所有实现都是在我的直接监督下，由 AI 编码代理生成的"，随后经过审查并被纳入项目。

商业竞争对手 SciChart 在比较中指出，TanStack 更适合处理"不需要实时处理大规模复杂数据集的简单图表创建"，而将重型实时工作负载导向硬件加速渲染器。该项目自身的大型数据指南也坦率地承认了这一点，指出 Canvas 虽然消除了 SVG DOM 成本，但并未减少比例尺、指南针或场景编译工作。

一个基本的React折线图在压缩和gzip处理后约为29 kB，该项目自身的对比显示其受控套件大小在38至45 KiB之间，与Chart.js的约45至58 KiB、Observable Plot的83至92 KiB、Apache ECharts的153至173 KiB以及AG Charts的更大数值相比。

稳定性指南指出Alpha版本“不是一个稳定的API承诺”，并建议固定使用精确版本，仓库中仍警告称该版本尚未准备好用于生产环境。正在迁移的团队应阅读迁移指南。

TanStack是由Tanner Linsley创建的一系列开源、无头架构、类型安全的库，涵盖Query、Table、Router、Form以及全栈Start框架，被数以百万计的应用所依赖。Charts将这种无头架构方法扩展到数据可视化领域。它采用MIT许可证发布，可免费使用。

作者部分主容器

关于作者

章节标题

每个作者的主容器

#### Daniel Curtis

显示更多

显示更少

#### 本内容属于Web开发主题

##### 相关主题：

  • 开发
  • Web开发
  • React
  • Angular
  • 数据可视化
  • Vue.js
  • TypeScript
  • React Native
  • 相关编辑内容
  • 相关赞助商 《实用智能体编码实践手册》
  • 相关赞助商 大规模自动化代码转换。修复漏洞、迁移框架、现代化遗留代码，覆盖所有仓库。免费试用Moderne

InfoQ新闻通讯

每周二发送上周InfoQ内容的汇总。加入超过25万名高级开发者的社区。查看示例

我们保护您的隐私。