palette.js开发者指南如何扩展自定义配色方案——addPalette与setColorFunction完整教程【免费下载链接】palette.jsScript for generating colour palettes for use with graphs, charts and cartography.项目地址: https://gitcode.com/gh_mirrors/pa/palette.jspalette.js是一款轻量级 JavaScript配色方案生成工具专为图表、图形与地图cartography生成专业级颜色序列而设计。内置 Paul Tol 与 ColorBrewer 经典色板的同时它还开放了addPalette与setColorFunction两大扩展接口让开发者能够轻松注册自定义配色方案custom color scheme。本文是一份面向初学者的完整教程带你从零开始掌握palette.js 自定义配色方案的创建、注册与调用全流程。一、快速上手5 分钟理解核心概念 如果还没有本地代码先克隆仓库git clone https://gitcode.com/gh_mirrors/pa/palette.js打开浏览器加载 demo.html即可看到交互式色板演示页支持色盲模拟这是验证自定义配色方案效果的最佳工具。palette.js 中只有两个核心概念理解了它们就理解了整个 API概念英文说明示例色板Palette一组固定数量的颜色用RRGGBB字符串数组表示[4477aa, cc6677]配色方案Scheme一个可调用的对象传入颜色数量即可生成色板hsv_rainbow(6)生成 6 色最简调用方式只需一行var seq palette(tol-sq, 10); // 生成 10 色的 Paul Tol 顺序色板 官方文档入口见 README.md核心 API 的完整注释都写在 palette.js 源码中。二、创建自定义配色方案的三个标准步骤 ✨扩展自定义配色方案遵循固定流程三步完成创建方案对象调用palette.Scheme(名称, 分组)得到一个空的可调用对象注入颜色来源二选一——用addPalette/addPalettes注册固定色板用setColorFunction注册颜色生成函数可生成任意数量颜色注册到全局调用palette.register(scheme)之后就能像内置方案一样按名字取色。方案对象的定义位于 palette.js注意它不能用new调用直接palette.Scheme(my-scheme)即可。三、addPalette 详解注册固定数量颜色 addPalette适合设计团队已有品牌色、或只有有限色阶的场景。其实现位于 palette.js。3.1 基本用法var brand palette.Scheme(my-brand, qualitative); brand.addPalette([ff0029, 377eb8, 66a61e, 984ea3]); palette.register(brand); var colors palette(my-brand, 4); // [ff0029, 377eb8, 66a61e, 984ea3]3.2 参数说明参数类型说明palette数组RRGGBB字符串数组不能为空opt_is_cbf布尔可选该色板是否色盲友好color-blind friendly。不传时该色板会自动降低方案的 CBF 上限3.3 批量注册与智能缩略批量添加addPalettes 可一次性传入数量→色板的映射表例如 ColorBrewer 方案就是按 3 色、4 色……9 色分别定义的。智能缩略若请求的颜色数少于最小色板方案会按等间距抽取颜色返回若颜色序列是渐变相邻颜色距离对应数组距离可以调用 shrinkByTakingHead 改为取头部策略var ex palette.Scheme(ex); ex.addPalette([000000, bcbcbc, ffffff]); ex.shrinkByTakingHead(true); ex(2); // [000000, bcbcbc]四、setColorFunction 详解函数生成无限颜色 addPalette的颜色数量有上限而setColorFunction则能让方案生成任意数量的颜色——这正是tol-sq、rainbow等内置方案的实现原理见 palette.js 与 palette.js。4.1 函数签名scheme.setColorFunction(func, opt_is_cbf, opt_cyclic);参数说明func颜色生成函数接收一个0.01.0之间的浮点数返回RRGGBB字符串。请求 11 色时会依次以 0.0、0.1 … 1.0 调用它opt_is_cbf生成的色板是否色盲友好opt_cyclic首尾颜色是否相同如 HSV 色环0° 与 360° 同色。设为true时生成过程不会取到终点避免首尾重复实现位于 palette.js。4.2 实用示例品牌渐变方案借助内置的 palette.rgbColor 与 palette.hsvColor 辅助函数几行代码就能做出渐变色板// 橙色 → 白色的品牌渐变 var warm palette.Scheme.withColorFunction(my-warm, sequential, function(x) { return palette.rgbColor(1, 1 - 0.6 * x, 1 - 0.9 * x); }, true); palette.register(warm); warm(8); // 生成 8 色渐变数量完全自由demo.js 中给出了更多现成的单通道渐变写法红、绿、蓝、灰度等可以直接借鉴。4.3 两种写法如何选择场景推荐方式品牌色、分类色、固定色阶addPalette/addPalettes渐变色、色环、需要任意数量setColorFunction两者兼有先addPalette再setColorFunction请求数量 ≤ 已注册色板时优先用色板超出时回退到函数五、注册与调用palette.register 让方案可按名取用 创建并填充好方案后调用 palette.register 注册。它会同时按方案名和分组名建立索引注册后即可用三种方式取色palette(my-brand, 4); // 按方案名 palette(qualitative, 4); // 按分组名取该组第一个 palette(qualitative-cbf, 4); // 加 -cbf 后缀只取色盲友好方案还支持第三个索引参数从同一分组中循环取不同方案非常适合不同数据系列分配不同色板的场景var pal_a palette([sequential], 10, 0); var pal_b palette([sequential], 10, 1);⚠️ 若名字匹配不到任何已注册方案palette函数返回null注意在业务代码中做判空。两个快捷构造函数可以让创建 填充 注册一步到位palette.Scheme.fromPalettes适合固定色板如 mpn65 方案的注册方式palette.Scheme.withColorFunction适合函数生成式方案。六、进阶技巧与常见问题 负数反转色板palette(tol-sq, -5)会生成 5 色并按逆序返回适合需要由深到浅的图表。CBF 色盲友好标记内置方案大多支持色盲友好如 Paul Tol 全系列自定义方案若不标记cbf在-cbf查询中会被过滤掉——做数据可视化建议认真评估并正确标注。验证效果修改后刷新 demo.html勾选色盲模拟红/绿色盲、灰度可直观检查自定义配色方案的区分度模拟算法见 demo.js。分组自定义groups参数除官方推荐的qualitative、sequential、diverging外可任意创建业务分组如dashboard。模块引入源码末尾兼容 CommonJSpalette.jsNode 环境下可直接require使用。七、核心文件速查表 文件说明palette.js库主文件palette.Scheme、addPalette、setColorFunction、register及全部内置方案demo.html交互式演示页内置色盲模拟验证配色方案的首选工具demo.js演示逻辑含单通道渐变与色盲滤镜示例代码README.md官方文档命名规则、快速开始、色盲友好说明package.jsonNPM 包信息包名google-paletteApache-2.0 协议总结掌握addPalette与setColorFunction这两个接口你就拥有了扩展 palette.js 的全部能力固定色板用前者无限渐变用后者再通过palette.register按名调用。无论是给图表系统统一品牌色还是为地图分级设色这套创建 → 填充 → 注册的三步流程都能帮助你快速构建一套专业、可复用、色盲友好的自定义配色方案。【免费下载链接】palette.jsScript for generating colour palettes for use with graphs, charts and cartography.项目地址: https://gitcode.com/gh_mirrors/pa/palette.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考