【免费下载链接】chartsA tiny TypeScript visualization grammar for responsive, accessible, server-rendered charts—powered by granular D3 primitives.项目地址https://gitcode.com/gh_mirrors/charts135/charts点击查看免费下载TanStack Charts 是一款面向响应式、可访问、支持服务端渲染的 TypeScript 可视化语法库。它的facetChart分面 API 与composeViews视图组合机制让你用同一套标记marks和比例尺scales快速打造专业的 Small Multiples 小倍数图与多视图仪表盘而不必更换数据模型或组件体系。一、什么是 Small Multiples为什么一张图装不下Small Multiples小倍数图是统计图形学中的经典手法把同一套视觉编码按分组重复成多个小面板让读者对比各组内部的形状与组与组之间的差异。想象一下把 5 个地区、每种 3 条趋势线全部叠在一张图里——就像上面这种多系列图表线条一多人眼就难以分辨谁的走势异常。而小倍数图的做法是每个地区独占一个面板横轴、纵轴使用共享的比例尺读者扫一眼就能横向对比。你想知道什么适合的布局同一分布在不同组之间有何差异共享比例尺的分面facets散点图与边缘直方图的关系带边缘视图的多视图组合长时序中哪个区段需要细节视图焦点上下文focus-plus-context选中一个视图时联动过滤另一个共享应用状态的联动视图完整的布局选型说明见 docs/examples/facets-and-multiple-views.md。二、facetChart 快速上手6 个关键参数核心 API 是facetChart它按分组字段重复一段标记组合返回一个完整的无外轴图表定义。它的选项定义在 FacetOptions参数作用默认值by分组字段字符串或数字必填chart回调接收该组数据并返回子图定义必填columns网格列数自动gap面板间距像素—axesouter共享外轴 /cell每面板独立坐标轴outerlabel面板标题传false关闭显示分组值最小工作示例按region字段分面每个面板画一条线加圆点。import { dot, facetChart, lineY } from tanstack/charts import { scaleLinear } from tanstack/charts/scales/linear export default facetChart(rows, { by: region, columns: 3, gap: 16, axes: outer, label: (region) String(region), chart(data) { return { marks: [ lineY(data, { x: week, y: orders, strokeWidth: 2 }), dot(data, { x: week, y: orders, r: 3.5 }), ], scales: { x: { scale: scaleLinear().domain([1, 4]) }, y: { scale: scaleLinear().domain([0, 80]), grid: true, axis: { label: Orders }, }, }, } }, }) 当面板需要作为更大的自定义定义里的一个标记存在时改用facet(rows, options)代替facetChart。如果项目还没初始化参考 docs/quick-start.md 用pnpm add tanstack/charts安装框架适配见 docs/installation.md。三、共享比例尺小倍数图可比性的关键axes: outer默认在整张分面网格外围绘制共享坐标轴——这是位置可直接跨面板比较的前提。构建共享比例尺的最佳实践是比例尺只构建一次然后传给每个分面。共享 domain位置严格可比适合谁的绝对值更高这类问题独立 domain局部波动更醒目但可能夸大差异——如果有意为之请在 UI 上明确标注这一策略。分面指南原文含 Anscombe 四重图示例入口在 docs/guides/faceting-and-composition.md。仓库里有两个可以直接阅读的完整用例分面分布对比按物种分面 共享 x 轴 归一化比例benchmarks/conformance/cases/51-faceted-distributions/example.tsxAnscombe 四重图分面benchmarks/conformance/cases/facets-anscombe/example.tsx四、composeViews 视图组合当面板角色不同时并非每个组合都是分面。焦点图上下文概览、散点图边缘直方图、主图环形摘要……这些角色不同但相关的视图用composeViews来自tanstack/charts/view组合成一个可访问的整体图形。布局原语一共四个原语用途fill(view)让一个视图占满全部空间grid(options)非重叠命名网格支持size固定与grow弹性轨道layer(...)按绘制顺序叠加后画的盖在上面inset(view, options)把视图锚定在另一个视图内部如右上角 160×160 的环形摘要再配合链接函数shareX/shareY让联动视图解析出相同比例尺alignX/alignY只做端点对齐、不共享 domain。完整 API 见 docs/reference/view-composition.md。import { alignX, composeViews, grid } from tanstack/charts/view const definition composeViews({ views: { overview: overviewDefinition, detail: detailDefinition }, layout: grid({ rows: [{ id: overview, size: 72 }, { id: detail, grow: 1 }], columns: [{ id: main, grow: 1 }], cells: { overview: { row: overview, column: main }, detail: { row: detail, column: main }, }, }), links: [alignX(overview, detail)], })viewGrid是非重叠网格场景的简写每个命名视图必须且只能放置一次缺失或重复会直接报错而不是渲染出残缺图形。五、跨视图联动用值而不是像素多视图协调最常见的坑是直接查询另一个图表的 SVG 节点、把像素坐标搬过来用。不同面板的边距、宽度、比例尺都可能不同同一个语义值在不同视图里对应的坐标也不同。正确的模式是语义应用状态某视图通过 focus、selection 或受控手势发出一个语义值应用状态校验并保存该值每个视图各自用自己的定义和比例尺派生每个图表走正常更新路径重绘场景。对焦点驱动的游标createChartCursor直接提供了这套应用拥有的共享状态无需 overlay 或回调中继import { createChartCursor, cursorHost } from tanstack/charts/cursor const sharedDate createChartCursorDate, number() const cursor { use: cursorHost, controller: sharedDate, mode: focus as const, match: x as const, pin: true, }无论宽度、边距还是 y 域不同每个订阅者都会把同一语义日期映射到自己的本地坐标并绘制各自的 crosshair。六、生产环境检查清单 ✅真正的分面只用一种重复编码角色不同就用命名视图每个composeViews命名视图只放置一次共享 vs 独立 domain 的策略必须显式声明分箱边界、分组顺序、颜色含义、单位保持一致可比可独立交互的视图各自提供可访问标签ariaLabel选择与视口状态在数据更新和尺寸变化后依然保留外轴准确时避免在每个面板上重复完整坐标轴。总结用 TanStack Charts 打造 Small Multiples 小倍数图的路径非常清晰同角色面板→facetChart一行搞定axes: outer 共享比例尺保证可比性异角色视图→composeViewsgrid/layer/inset自由布局跨视图联动→ 语义值走应用状态拒绝像素级 hack。所有能力都从精确子路径按需导入tanstack/charts、tanstack/charts/view、tanstack/charts/cursor树摇友好只为用到的部分付费。赞分享【免费下载链接】chartsA tiny TypeScript visualization grammar for responsive, accessible, server-rendered charts—powered by granular D3 primitives.项目地址https://gitcode.com/gh_mirrors/charts135/charts点击查看免费下载相关推荐Plotly.py 地图子图与小倍数图Map Subplots Small Multiples实战用 scattergeo layout.geo 域定位绘制 45 宫格美国地图Plotly.py 地图子图与小倍数图Map Subplots Small Multiples实战用 scattergeo layout.geo数据可视化图表库数据分析XCL-Charts面积图与曲线图实战打造专业级数据可视化XCL Charts面积图与曲线图实战打造专业级数据可视化 XCL Charts作为一款功能强大的Android图表库为开发者提供了丰富的数据可视化解决方案如何快速上手 Live-Charts打造惊艳 .NET 数据可视化图表的完整指南 如何快速上手 Live Charts打造惊艳 .NET 数据可视化图表的完整指南 Live Charts 是一个功能强大的 .NET 图表库提供丰富的数据可视化图表库上一篇在 LiveKit Agents 中集成 Gladia 实时语音识别livekit-plugins-gladia 完整配置与实战指南下一篇Logto X 社交登录连接器接入指南基于 X OAuth 2.0 的授权码 PKCE 流程解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
