스크립트
00:00:00TanStack 又一次做到了，这次他们通过 TanStack Charts 解决了 JavaScript 中的图表问题。
00:00:04它承诺提供比 ReCharts 等库更小的包体积，支持 SVG 和
00:00:08Canvas 输出、动画、提示框、交互，而且和大多数 TanStack 库一样，它拥有
00:00:13与框架无关的核心、类型安全以及极佳的开发者体验。尽管它非常新，
00:00:18但你已经可以用它构建许多类型的图表，从基本的折线图
00:00:22或柱状图，到更复杂的桑基图、树状图、热力图、雷达图、
00:00:27圆环图、仪表盘，甚至是超酷的世界地图。它大概已经能满足你
00:00:32所有的需求了。现在我要讲的第一件事是 TanStack Charts 实际处理图表的方式，
00:00:41因为它类似于 R 语言中的 ggplot2 库，采用了一套图形语法。这种
00:00:47方法不把图表视为固定类型，而是由图元、
00:00:51比例尺和映射组合而成，所以你不用请求一个柱状图，而是指定诸如“在这里放一些柱子，
00:00:56把这个变量映射到 x，那个变量映射到 y，并应用这些比例尺”这样的规则，根据这些描述，
00:01:01图表就诞生了。这是一个非常微妙的区别，但正是它让这个库变得极其
00:01:05灵活。我是说，有人发推询问它是否能制作像这样的图表，得到的回答是肯定的。
00:01:11这不是内置的图表类型，只是该库足够灵活，能够制作出来。
00:01:14至于这是如何运作的，如果我们看一下这个映射英文字母
00:01:18出现频率的柱状图演示，其核心代码只有 20 行。它首先使用 define chart 函数
00:01:23进行图表定义，而在内部我们从图元（marks）开始。你可以将图元
00:01:28视为实际被绘制的东西，比如你的线条、点或柱子。我实际上构建了一个演示
00:01:32网站，尝试使用 TanStack charts 中可用的所有图元，我想大概有 55 个左右，
00:01:37所以这应该能相当好地展示你可以在 TanStack charts 中构建的图表，
00:01:40而且它们的数量实在是太多了。你得听我慢慢道来，
00:01:43不过你可以看到我们有常规的柱状图，无论你想要水平还是垂直的，
00:01:47折线图和面积图也是如此。然后我们还有点状图，
00:01:51有穿过图表的虚线规则，你可以将其设为垂直的，
00:01:54你可以创建刻度图（同样支持 x 或 y），你有矩形，你有单元格，你有色带，
00:01:59你有箭头，你有向量，所以你可以创建一个风场，你有连接线，你有六边形，
00:02:04你有文本，所以图元可以是文本，用来在图表中的任何位置渲染它们。我们有边框，
00:02:08我们有线条，我们有差异图，我们有线性回归图，我们有箱形图，我们有小提琴
00:02:13图，我们有华夫饼图。你现在就可以用它制作等高线地图。顺便说一句，
00:02:17这个库才发布了一周，这太疯狂了，它有这么多的功能，而且列表还在继续。
00:02:22我们可以创建这个图表，不管那到底是什么鬼东西，我甚至不知道那是用来做什么的。
00:02:25我们有树状图，我们有旭日图，我们有桑基图，我们有十字准星聚焦
00:02:29指引，我们有径向图，比如饼图、圆环图或雷达图，然后
00:02:33最后在这里，如果你想要世界地图图表，我们还有地理形状图（geoshape）。正如我所说，
00:02:38有太多这样的图元可以组合，几乎能创建你需要的任何图表。回到我们的柱状图
00:02:42演示，我唯一需要的图元是 bar y，在它内部，你传入你的数据，
00:02:47也就是这个对象数组。然后在此之后，你定义什么是 x 键，什么是 y
00:02:51键，这太棒了，因为它意味着你不必让你的数据符合某个特定的结构，
00:02:56你只需在这里定义即可。它也是类型安全的，这意味着如果我拼错了其中一个键，
00:03:00它会立即让我知道，这就是我们所热爱的 TanStack 的类型安全性。
00:03:04在我们定义好所需的图元后，接着就是 x 轴和 y 轴。对于 x 轴，
00:03:08这超级简单。我说过我想要 space band（用于分类），这样我们的字母就能
00:03:12均匀分布，并且我在它们之间设置了一些内边距。对于 y 轴，我使用的是 scale
00:03:17linear（用于数字），并且我将 nice 设置为 true，这意味着将坐标轴
00:03:21四舍五入到一个合理的数字，而不是停留在我们拥有的最高值上。如果我将其设置为 false，
00:03:26你可以看到这里的坐标轴顶部正好在最高柱子的顶部结束。在这里，
00:03:30我还为坐标轴添加了一个标签以及一个格式化函数，这样我们就可以将这些数字格式化为百分比
00:03:34而不是小数。现在，所有这些定义都是与框架无关的部分，但要在 React 中
00:03:39实际渲染它，我们要做的全部事情就是导入 chart 组件，把我们的定义传给它，
00:03:43给它一个高度和一个标签，这就是制作图表所需的全部内容。但我想要
00:03:47明确指出的是，我们这里并没有使用柱状图组件。我们在代码中定义了要在哪里
00:03:51渲染图元，最终结果恰好是一个柱状图，这是一个非常微妙的
00:03:55区别，但这正是图形字面量的应用。作为其灵活性的一個例子，
00:04:00假设我想在柱状图上画一条平均线，我需要做的就是进入 marks 数组并添加一个
00:04:04新图元，这次是 rule Y。再举一个简单的例子，假设我想要一个带点的折线图以及
00:04:09底部的面积图，那么我只需将所有这些定义为图元，看，我现在就拥有了一个
00:04:14订阅者数量的图表，这也是提醒你订阅的绝佳时机，以便紧跟 AI 和
00:04:18这类开发者资讯。如果你想看到更多利用这些图表标记构建
00:04:22我之前展示的各种图表的示例，你可以查看他们的文档，里面有大量的
00:04:26示例，并且极其详尽。事实上，我从他们的文档中多拿了几个示例
00:04:30放在这里，只是为了向你展示 TanStack charts 到底能做些什么，因为我没有时间深入讲解
00:04:34所有功能，那字面意思上需要大约 20 个小时，但其中最酷的功能之一就是这个地球
00:04:38图表，我真的非常喜欢它，我认为在一个发布仅一周的库中能做到这一点超级酷。
00:04:42然后我们还有交互功能，这超级棒，我们有这个框选工具，我们可以将其拖动跨越
00:04:46我们的绘图区，并从两侧改变它的范围。我们可以对图表进行缩放，从而在
00:04:51这个折线图上精细地放大。我们有键选择加键盘选择，所以如果我悬停在其中一个
00:04:56并按下空格键，一切都运行得很好，你可以看到它在下方读取了我们所选内容的值。
00:05:00然后我们还有十字准星，当我移动时，你可以看到它在下方的坐标轴上打印出
00:05:04我悬停的实际日期。它还具有包含大量配置的提示框（tooltips），
00:05:09所以你可以看到目前它被设置为 nearest X，因此只有水平距离决定了它将选择
00:05:14哪一个点。我们也可以选择像 group X 这样的策略，这样当我悬停在
00:05:18这里的任何区域时，它会向我显示所有这些值。你还可以将其设置为固定提示框，所以如果我悬停在
00:05:22这里的柱状图上，你可以看到提示框在变化，但如果我点击其中一个，就会固定住
00:05:26提示框并显示一些额外的细节。在这里，你还可以看到我们没有提示框，但
00:05:31它直接在下方读取这些值，所以你可以提取该信息，而在这里我们
00:05:35正在渲染一个自定义提示框，所以如果我点击固定，我们有一个自定义关闭按钮，所有这一切
00:05:39都是在 React 中完成的。如果你想做一些动画，这个库也能满足你的需求，所以如果我改变
00:05:43这里这些柱子的值，你可以看到它们在这些更改的值之间平滑地做动画。
00:05:48我们还可以点击这里的重播，你可以看到我们的柱状图可以错开入场，
00:05:51如果我继续删除这里的一些柱子，你可以看到它在
00:05:55添加或删除这些柱子之间完美地进行动画过渡。我们甚至可以做流式动画，随着新数据的到来，
00:06:00它只是在平移折线柱而不是重新绘制。而在我继续讲解
00:06:03这些图表如何设置样式之前，我想展示的最后一个功能是导出功能。你可以看到我有
00:06:07下载为 SVG 和 PNG 的按钮，如果我点击它们，这就是我得到的最终结果。
00:06:12现在让我们来谈谈如何为这些图表设置主题和样式，因为如果我从
00:06:16这里的图表中移除样式，这就是默认的基础外观，因为开箱即用它没有任何样式，它只是
00:06:21使用当前颜色作为前景，背景是透明的。TanStack charts 中
00:06:25的样式设置分为三个级别，首先是你的 CSS 变量。这些是来自六个自定义属性的
00:06:30分类颜色，你可以在你喜欢的任何容器上覆盖它们。所以如果我改变
00:06:35这里的这些值，你可以看到这个图表是如何更新其所有颜色的。第二个级别是在
00:06:39主题区块上，它位于实际的图表定义中。这适用于所谓的图表
00:06:43家具（chart furniture）而不是数据，所以它是诸如你的文本、网格线、背景
00:06:47等内容。然后第三个级别是在图元本身上，所以你可以设置诸如填充、
00:06:51描边、不透明度、线帽、虚线、圆角半径、字体等属性。这些也可以是固定值或
00:06:57由数据驱动的，因此你可以根据柱子是否超过某个目标来为其着色。你甚至可以利用数据
00:07:01构建渐变效果。正如我所说，这个库超级灵活。它也超级轻量。
00:07:06在那个基准完整套件中，它包括了诸如十字准星、框选、缩放、选择等功能，
00:07:10应有尽有。包体积在 36 到 43 KB 之间。如果我们将其与 Chart.js 或
00:07:16Recharts 相比，Chart.js 大小为 45 到 58 KB，而 Recharts 为 153 到 168 KB。所以 TanStack
00:07:24charts 要小得多。关于这点的另一个极棒的部分是它的理念。他们实际上
00:07:28为两件事构建了它。首先，人们应该通过简短的声明获得精致的图表，
00:07:32其次，AI 应该能够编写、检查和修改图表，而无需学习特定于应用程序的
00:07:38序列模型。因此他们设计了这个 API，以便代理（agent）无需阅读
00:07:42文档就能编写图表，老实说，我用 Claude 编写了我之前做的大部分演示，虽然我仔细检查了
00:07:47这一点——这在现在挺少见的，但它基本上符合我的一切预期。我只需要做
00:07:52非常少的修改，这对于一个全新的库来说相当令人惊奇。这就是 TanStack charts。它是我的
00:07:57新宠图表库，并且正在迅速改进。请在下方的评论区告诉我你的想法。
00:08:01顺便点个订阅。一如既往，我们下期见。