数据可视化前端【免费下载链接】Infographic An Infographic Generation and Rendering Framework, bring words to life with AI!项目地址https://gitcode.com/gh_mirrors/info/Infographic点击查看免费下载本篇指南聚焦 AntV Infographic 框架中的**自定义色板Custom Palettes**机制。你将掌握通过registerPalette注册可复用的离散色板与连续色板、理解色板从注册到渲染的底层解析链路PaletteRegistry→getPaletteColor→ 主题配色并能将品牌色体系通过theme.palette与themeConfig.palette两条路径接入信息图。读完本文你可以为自己的业务定制一套可复用的品牌配色系统并把它一键应用到任何信息图结构中。前置概念先认识 Palette 在主题中的定位AntV Infographic 中色板Palette是主题Theme的组成部分它为数据项items提供颜色集合常用于区分类别、表达数据层级与引导视觉注意力。如果你对主题体系还不熟悉建议先阅读 Core Concepts - Theme - Palette 与 主题指南其中系统讲解了theme.palette的三种形态与内置色板的使用方式。在深入自定义之前先明确一个核心事实色板在源码层面就是一个独立的可注册单元。它由 palettes 模块 管理其类型定义types.ts非常简洁export type Palette | string | string[] | ((ratio: number, index: number, count: number) string);也就是说色板一共只有三种形态形态类型典型用途名称字符串string引用已注册的内置色板或自定义色板离散色板string[]一组颜色字符串按数据项索引循环取色用于分类连续色板函数根据ratio / index / count计算颜色用于渐变、连续数据registerPalette注册自定义色板的核心 API官方文档custom-palette.en.md给出的核心思路只有一句话通过registerPalette注册自定义色板从而在信息图中复用。下面将其拆解成两个完整可运行的示例。注册离散色板数组形式离散色板是最常见的形态——一个颜色字符串数组。它天然适合品牌色系统、类别区分等场景import { registerPalette, Infographic } from antv/infographic; // Register a discrete palette (an array of color strings) registerPalette(discrete-palette, [#FF356A, #7BC9FF, #FFD166]);注册连续色板函数形式连续色板是一个接收ratio参数的函数返回值必须是颜色字符串。它适合表达数据渐变、热度、排名等连续语义import { registerPalette, Infographic } from antv/infographic; // Register a continuous palette (a function that returns a color string) registerPalette(continuous-palette, (ratio) { const r Math.round(255 * ratio); const g Math.round(200 * (1 - ratio)); const b 150; return rgb(${r}, ${g}, ${b}); });上述示例中ratio从 0 变化到 1 时返回颜色会从偏绿rgb(0, 200, 150)平滑过渡到偏红rgb(255, 0, 150)。在渲染脚本中按名称引用注册完成后色板即进入全局注册表。在infographic.render()的语法字符串中通过theme.palette按名称引用const infographic new Infographic({ // other configuration options... }); infographic.render( theme palette discrete-palette );注意此处语法与 JSON 配置的差异在信息图语法infographic syntax中简单数组保持内联写法palette discrete-palette是名称引用若要内联颜色数组则写成多行- #61DDAA形式。关于语法细节可参考 infographic-syntax.en.md。从注册到取色源码级解析 Palette 的完整生命周期自定义色板能够“即插即用”的背后是 renderer 层一套清晰的注册-查询-取色链路。理解它能让你更好地预测色板行为如越界取色、ratio 计算方式。第一步全局注册表 PaletteRegistry注册表的实现位于 src/renderer/palettes/registry.ts核心是一个Mapstring, Paletteconst PALETTE_REGISTRY new Mapstring, Palette(); export function registerPalette(name: string, palette: Palette) { PALETTE_REGISTRY.set(name, palette); } export function getPalette(type: string): Palette | undefined { return PALETTE_REGISTRY.get(type); } export function getPalettes(): Recordstring, Palette { return Object.fromEntries(PALETTE_REGISTRY); }registerPalette(name, palette)按名称注册同名后注册会覆盖先注册的Map.set语义getPalette(type)按名称取回色板不存在时返回undefinedgetPalettes()返回当前注册表快照Recordstring, Palette可用于调试或枚举全部可用色板。模块入口 src/renderer/palettes/index.ts 会先import ./built-in加载内置色板再导出registerPalette / getPalette / getPalettes以及类型Palette和取色工具getPaletteColor。也就是说内置色板与自定义色板共用同一个注册表。第二步取色核心 getPaletteColor真正决定“每个数据项拿到什么颜色”的是 src/renderer/palettes/utils.ts 中的getPaletteColorexport const getPaletteColor ( args: string | Palette [], indexes: number[], total?: number, ) { const palette typeof args string ? getPalette(args) || [] : args; const index indexes[0] ?? 0; if (typeof palette function) { const ratio total ? index / total : 0; return palette(ratio, index, total ?? 0); } if (Array.isArray(palette)) { if (palette.length 0) return; return palette[index % palette.length] as string; } };它的行为可以通过 palette.test.ts 中的测试用例精确印证按名称解析若args是字符串则先经getPalette查表查不到时回退为空数组此时返回undefined离散色板循环取色数组色板按index % palette.length取色——当索引越界时自动循环回绕例如[#red, #green, #blue]取索引 5 时5 % 3 2返回#blue空索引回退indexes为空数组时索引默认取 0连续色板 ratio 计算ratio index / totaltotal未提供时为 0并连同index、count一起传给函数。测试用例验证getPaletteColor(fn, [2], 10)会以(0.2, 2, 10)调用函数空数组安全空色板数组直接返回undefined不会抛错。这也解释了官方示例中连续色板函数的实际调用形态虽然示例只写了(ratio) {...}但框架实际会传入(ratio, index, count)三个参数你可以在函数中自由使用后两者。第三步与主题/结构渲染的衔接色板取色结果被直接用于结构structure的逐项着色。以 chart-bar.tsx 为例const barColor getPaletteColor(options, [index]) || themeColors.colorPrimary;chart-column.tsx、chart-line.tsx、chart-pie.tsx 等内置图表结构均采用同一模式先用getPaletteColor按数据项索引取色取不到时回退到主题主色themeColors.colorPrimary。这意味着即使色板只有 3 个颜色而数据有 10 项超出部分也会循环复用不会报错。在 src/options/parser.ts 中主题色生成同样以getPaletteColor(themeConfig?.palette, indexes, data?.items?.length)的结果作为起点兜底为themeConfig.colorPrimary或默认色#FF356A见 parser.ts无 palette 时用[colorPrimary]作为单色色板。因此自定义色板会从全局渲染层到具体结构层一路生效。两种接入方式语法字符串与 themeConfig官方文档明确指出“Once registered, reference the palette by name inthemeConfig.palette”。结合源码色板有两种等价的接入路径方式一语法字符串render 内部theme palette discrete-palette方式二编程式配置new Infographic({ themeConfig })const infographic new Infographic({ themeConfig: { palette: discrete-palette, // colorPrimary: #FF356A, // 可选未命中色板时的兜底主色 }, // other configuration options... });两种方式最终都会汇入themeConfig.palette字段。从 parser.ts 看解析器会将命名主题的配置与themeConfig做合并merge({}, base, themeConfig)若最终palette为空则回退为[colorPrimary]。因此themeConfig.palette可以传入色板名称字符串引用已注册色板推荐做法内联颜色数组临时色板无需注册函数临时连续色板。内置色板参考antv 与 spectral理解自定义色板的最佳参照物是 src/renderer/palettes/built-in.ts 中随框架内置的两组色板官方文档见 built-in-palettes.en.mdantv—— AntV 品牌色离散色板共 11 色export const antv: Palette [ #1783FF, #00C9C9, #F0884D, #D580FF, #7863FF, #60C42D, #BD8F24, #FF80CA, #2491B3, #17C76F, #70CAF8, ]; registerPalette(antv, antv);spectral—— 连续数据场景的渐变函数色板。它的实现很值得学习根据count数据项总数选择不同长度的色带数组再按index % size取色built-in.tsexport const spectral: Palette (_, index, count) { const colors [ /* 3 色到 11 色的多组渐变序列 */ ]; const size Math.min(Math.max(count, 3), 11); return colors[size - 3][index % size]; };从源码可以看出spectral的取色策略数据项少于 3 时按 3 处理多于 11 时按 11 截断色带数量随count自适应。这套“函数色板根据 count 自适应”的写法正是业务中做动态渐变配色的绝佳范本。你可以通过getPalettes()获取完整内置列表通过getPalette(antv)/getPalette(spectral)获取具体色板值或函数。实战建议与边界说明注册时机registerPalette是模块级全局操作建议在应用初始化阶段创建任何Infographic实例之前一次性注册所有品牌色板之后所有实例共享品牌色板落地将品牌 VI 主色、辅助色、警示色整理成离散数组命名如brand-accent、brand-data即可在任意信息图语法中按名引用避免在多个配置中重复硬编码颜色连续色板三参数自定义连续色板函数可完整使用(ratio, index, count)其中count常用来做归一化或分段插值这是官方示例仅用ratio未展开但源码确认支持的能力循环取色预期离散色板取色采用index % length循环若你希望“颜色不重复”需要保证颜色数量 ≥ 数据项数量兜底机制色板取色失败时框架自动回退到colorPrimary默认#FF356A因此即便色板注册遗漏渲染也不会中断适用前提以上行为基于当前仓库实现registry.ts、utils.ts若升级框架版本请以对应版本源码与文档为准。延伸阅读主题指南 - 色板章节theme.palette的三种配置形态与内联数组写法内置色板参考antv与spectral的官方说明内置主题参考了解主题与色板、字体、风格化的组合方式自定义主题指南注册完整主题并内置palette字段Palette 类型定义三种色板形态的 TypeScript 定义赞分享数据可视化前端【免费下载链接】Infographic An Infographic Generation and Rendering Framework, bring words to life with AI!项目地址https://gitcode.com/gh_mirrors/info/Infographic点击查看免费下载相关推荐G6 自定义色板完全指南离散色板与连续色板的实现、注册与使用G6 自定义色板完全指南离散色板与连续色板的实现、注册与使用 在 G6 图可视化框架中色板Palette是将节点、边等元素的数据字段映射为颜色的核心机制数据可视化前端图表库Win11Debloat 入门教程10 分钟完成 Windows 11 去臃肿、关遥测与卸载预装应用Win11Debloat 入门教程10 分钟完成 Windows 11 去臃肿、关遥测与卸载预装应用 Win11Debloat 是一个免费开源的 PowerS桌面应用CLIBuzz 离线转录完整指南在你自己的电脑上把音频变成带时间戳的文字Buzz 离线转录完整指南在你自己的电脑上把音频变成带时间戳的文字 刚上完一节 3 小时的网课200MB 的 MP3 躺在下载目录里你还需要给下一期播客补数据可视化前端上一篇DLSS Swapper终极指南3分钟掌握游戏性能优化神器免费提升30%帧率下一篇终极指南AcFunDown视频下载工具完整使用教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
