palette.js快速参考scheme名称、组名与palette()函数三种调用方式全解析【免费下载链接】palette.jsScript for generating colour palettes for use with graphs, charts and cartography.项目地址: https://gitcode.com/gh_mirrors/pa/palette.jspalette.js 是一款面向图表、地图配色的轻量级颜色调色板生成脚本内置 Paul Tol 与 ColorBrewer 等经典配色方案一行代码即可为图表生成任意数量的 RRGGBB 颜色序列。本文将用最短篇幅讲透它的两个核心概念scheme 与 palette、常用名称速查表以及palette()函数的三种调用方式帮你快速上手这套配色工具。 先搞懂两个核心概念scheme 与 palette理解 palette.js 的关键在于区分两个概念源码注释中称为scheme和palette定义见 palette.js 开头的说明概念是什么表现形式palette调色板一串固定长度的颜色序列由RRGGBB十六进制字符串组成的数组scheme配色方案一组调色板的集合一个带属性和方法的可调用函数用scheme(数量)即可生成指定大小的调色板简单来说scheme 是配方palette 是成品。调用scheme(6)就得到 6 色的成品调色板。 scheme 名称与组名速查表palette.js 默认注册了以下配色方案完整列表见 palette.js 中listSchemes的文档注释名称类型说明tolqualitativePaul Tol 定性配色色盲友好最多 12 色tol-sqsequentialPaul Tol 顺序渐变配色tol-dvdivergingPaul Tol 发散配色tol-rainbowqualitativePaul Tol 彩虹配色mpn65qualitative大型定性配色一次提供 65 色rainbow通用HSV 彩虹可通过 varargs 调整饱和度/亮度cb-YlGn、cb-Blues、cb-Reds…sequentialColorBrewer 顺序类共 18 种cb-RdYlBu、cb-PuOr…divergingColorBrewer 发散类共 9 种cb-Set1、cb-Paired…qualitativeColorBrewer 定性类共 8 种sol-base/sol-accent顺序/定性Solarized 基础色与强调色除了具体方案名还可以用组名一次匹配一批方案all全部、sequential顺序、diverging发散、qualitative定性以及限定 ColorBrewer 的cb-sequential、cb-diverging、cb-qualitative。 小技巧任何名称后加-cbf后缀如sequential-cbf就只匹配色盲友好Colour Blind Friendly的方案详见 README.md 的 Note on colour blindness 一节。 palette() 函数的三种调用方式palette()是 palette.js 的核心入口实现见 palette.js签名为palette(scheme, number, opt_index)第一个参数正是上面介绍的三种名称形态方式一按 scheme 名称调用最精确直接指定具体方案名结果是确定的var seq palette(tol-sq, 10); // 生成 10 色的 Paul Tol 顺序调色板方式二按组名调用自动选第一个可用方案传入组名时会按名称排序取第一个匹配的方案var seq palette(sequential, 10); // 取第一个顺序类方案 var cbf palette(sequential-cbf, 10); // 再限定色盲友好方式三按名称列表调用带回退优先级第一个参数可以是一个名称数组按顺序尝试命中即止var div palette([tol, qualitative], 10); // 优先用 Paul Tol 定性方案不可用时退回第一个定性方案进阶第三个参数 opt_index当名称匹配到多个方案时第三个参数指定用第几个从 0 开始可循环取模。这是为不同类型数据快速区分配色的高阶用法var pal_for_queries palette([sequential], 10, 0); var pal_for_errors palette([sequential], 10, 1); var pal_for_latency palette([sequential], 10, 2);三行代码就能为三类数据生成三套互不相同的 10 色调色板。⚠️ 两个容易踩的坑匹配不到时返回null名称拼写错误或组为空时palette()返回null而非报错使用前建议判空。负数 颜色反转number为负时取绝对值生成并倒序返回颜色适合需要反向渐变的场景。数量超出方案上限部分方案如 ColorBrewer 各方案只内置了固定几种长度超出时会按已有调色板插值或生成失败可在 demo.js 的createColorRow中看到Too many colours requested.的处理。 关键文件路径核心实现palette.js1500 余行含全部内置方案注册逻辑末尾通过module.exports支持 Node.js 引入交互演示脚本demo.js演示页入口为demo.html支持色盲模拟模式包信息与依赖package.json、bower.json许可证LICENSEApache-2.0及 ColorBrewer、Solarized 的附加许可文件✅ 小结记住这张心智图即可驾驭 palette.jspalette 是颜色数组scheme 是生成函数palette()第一参数可填方案名、组名或名称列表第二参数是数量第三参数选第几个方案。配合-cbf后缀和负数反转这套配色工具足以覆盖图表、看板与地图配色的绝大多数日常需求。【免费下载链接】palette.jsScript for generating colour palettes for use with graphs, charts and cartography.项目地址: https://gitcode.com/gh_mirrors/pa/palette.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考