Chart.js 雷达图 Scriptable 选项实战用脚本化函数动态驱动样式与数据点渲染【免费下载链接】Chart.jsSimple HTML5 Charts using thetag项目地址: https://gitcode.com/gh_mirrors/ch/Chart.js本篇指南以 Chart.js 官方示例库中的雷达图脚本化选项示例docs/samples/scriptable/radar.md为核心系统讲解 Scriptable Options 的完整用法如何让折线颜色、点样式、透明度、点半径等属性随数据集索引、数据索引乃至具体数值动态变化。读完本文你将掌握 Chart.js 脚本化选项的函数签名、context 上下文结构、选项解析层级以及雷达图控制器在底层如何消费这些动态选项。示例概述一个纯脚本化驱动的雷达图该示例在type: radar的配置下没有使用任何静态颜色或尺寸值所有视觉属性均由脚本化函数在渲染时计算得出。它同时演示了脚本化选项在两类元素上的应用elements.line雷达图的外圈折线折线填充色backgroundColor与描边色borderColorelements.point雷达图顶点数据点背景色、悬停背景色、半径、点样式、悬停半径。示例还包含一个Randomize交互动作可在运行时重新生成数据并触发重绘便于观察脚本化函数随数据变化的行为。图例与 Tooltip 均被关闭legend: false、tooltip: false让画面焦点完全落在脚本化样式本身。随机数据与多行标签示例通过示例库专用工具 docs/scripts/utils.js 生成可复现的随机数据const DATA_COUNT 7; Utils.srand(110); function generateData() { return Utils.numbers({ count: DATA_COUNT, min: 0, max: 100 }); } const data { labels: [[Eating, Dinner], [Drinking, Water], Sleeping, [Designing, Graphics], Coding, Cycling, Running], datasets: [{ data: generateData() }] };两个值得注意的细节Utils.srand(110)固定随机种子。srand会重设utils.js内部的线性同余伪随机数生成器_seed (_seed * 9301 49297) % 233280保证每次刷新页面渲染出的数据点完全一致便于对照调试。标签支持字符串数组。雷达图 7 个轴点中部分标签以[Eating, Dinner]这样的两段数组形式给出Chart.js 会自动将数组元素换行排版在径向刻度的pointLabels上。这是雷达图径向线性刻度特有的标签能力。Scriptable 选项函数即配置在 docs/general/options.md 中Scriptable Options 被定义为Scriptable options 也接受一个函数该函数会针对每个底层数据值被调用一次并接收唯一参数context上下文信息同时传入一个 resolver 作为第二个参数用于在同一上下文中解析其他选项的值。也就是说凡是标注为 Scriptable 的配置项都可以把静态值替换为一个函数color: function(context) { const index context.dataIndex; const value context.dataset.data[index]; return value 0 ? red : // 负值画红色 index % 2 ? blue : // 否则按索引奇偶交替蓝绿 green; }函数在每次元素更新/绘制解析选项时被调用因此天然具备响应数据变化的能力。官方文档还特别提示脚本化函数内应对context的type字段做校验因为同一个函数可能在不同上下文chart、dataset、data、scale、tick、pointLabel、tooltip中被调用。context 上下文结构脚本化函数的context是分层继承的对象子层级自动继承父层级全部字段chart层级chart图表实例、type: chartdataset层级在 chart 基础上增加dataset、datasetIndex、index同 datasetIndex、active、mode、type: datasetdata层级在 dataset 基础上增加dataIndex、parsed已解析数据、raw原始数据、element当前元素如 point/arc/bar、type: data此外还有scale、tick、pointLabel仅径向线性刻度使用、tooltip等层级。本示例的脚本化函数全部工作在data层级因此可以放心使用ctx.datasetIndex、ctx.dataIndex与ctx.parsed.y。逐项剖析示例中的脚本化函数1. 按数据集索引取色getLineColorfunction getLineColor(ctx) { return Utils.color(ctx.datasetIndex); }Utils.color(index)从utils.js内置的 9 色COLORS调色板中取色COLORS[index % COLORS.length]多数据集时自动循环配色。该函数被同时赋给折线的backgroundColor、borderColor以及数据点的backgroundColor保证同一条雷达图的线、点颜色一致。2. 按数据索引交替点样式alternatePointStylesfunction alternatePointStyles(ctx) { const index ctx.dataIndex; return index % 2 0 ? circle : rect; }利用ctx.dataIndex的奇偶性让雷达图 7 个顶点在圆形circle与矩形rect之间交替出现直接验证了脚本化选项对pointStyle的逐点控制能力。3. 透明度控制makeHalfAsOpaque与make20PercentOpaquefunction makeHalfAsOpaque(ctx) { return Utils.transparentize(getLineColor(ctx)); } function make20PercentOpaque(ctx) { return Utils.transparentize(getLineColor(ctx), 0.8); }Utils.transparentize(value, opacity)的实现中alpha opacity undefined ? 0.5 : 1 - opacity——不传第二参时生成 50% 透明度传入0.8时生成1 - 0.8 0.2的 alpha即 20% 不透明度。示例用它们分别设置折线填充色backgroundColor: make20PercentOpaque半透明填充隐约透出网格点悬停背景色hoverBackgroundColor: makeHalfAsOpaque悬停时点变半透明。值得注意的是makeHalfAsOpaque内部先调用了同样以ctx为入参的getLineColor(ctx)体现了脚本化函数之间可以互相组合复用的编码风格。4. 按数值分级点半径adjustRadiusBasedOnDatafunction adjustRadiusBasedOnData(ctx) { const v ctx.parsed.y; return v 10 ? 5 : v 25 ? 7 : v 50 ? 9 : v 75 ? 11 : 15; }这是本示例最具代表性的数据驱动样式写法读取ctx.parsed.y雷达图数据点经解析后的数值内部格式为{x, y}参见 docs/charts/radar.md 的 Internal data format 一节按数值区间返回 5/7/9/11/15 五档半径。数据点越大点画得越大让雷达图多了一层可视化信息维度。元素配置的完整装配options: { plugins: { legend: false, tooltip: false, }, elements: { line: { backgroundColor: make20PercentOpaque, borderColor: getLineColor, }, point: { backgroundColor: getLineColor, hoverBackgroundColor: makeHalfAsOpaque, radius: adjustRadiusBasedOnData, pointStyle: alternatePointStyles, hoverRadius: 15, } } }这里有两层结构值得说明elements命名空间options.elements.line.*与options.elements.point.*分别作用于雷达图的两类核心元素——折线元素datasetElementType: line与数据点元素dataElementType: point。若某数据集未显式指定样式这些值会按选项解析顺序回退到elements层因此是配置全部雷达图默认点/线样式的推荐位置。悬停态的单独配置hoverRadius: 15固定为静态值与脚本化的radius形成对比——脚本化选项与静态值可以混用Chart.js 会按实际配置逐项解析。雷达图相关配置项速查结合 docs/charts/radar.md 的 Dataset Properties 表格本示例涉及的可脚本化配置项如下配置项所属类型默认值说明backgroundColorlineColorScriptablergba(0, 0, 0, 0.1)折线填充色borderColorlineColorScriptablergba(0, 0, 0, 0.1)折线描边色pointBackgroundColorpointColorScriptable/Indexablergba(0, 0, 0, 0.1)点填充色pointBorderWidthpointnumberScriptable/Indexable1点边框宽度pointHitRadiuspointnumberScriptable/Indexable1不可见命中区域像素半径pointHoverBackgroundColorpointColorScriptable/Indexableundefined悬停填充色pointHoverRadiuspointnumberScriptable/Indexable4悬停半径pointRadiuspointnumberScriptable/Indexable3点半径为 0 时不渲染pointRotationpointnumberScriptable/Indexable0点旋转角度度pointStylepointpointStyleScriptable/Indexablecircle点形状如circle/rect/triangle/star除脚本化外这些点样式属性还支持Indexable数组写法数组第 i 项对应第 i 个数据点元素少于数据时循环复用多数场景下脚本化函数表达力更强。Randomize 动作运行时验证脚本化逻辑const actions [ { name: Randomize, handler(chart) { chart.data.datasets.forEach(dataset { dataset.data generateData(); }); chart.update(); } }, ];actions数组是 chart-editor 示例框架约定的交互描述handler接收图表实例将每个数据集的data替换为新随机数组后调用chart.update()。由于脚本化选项在每次元素更新时都会重新求值点击 Randomize 后点的半径分布、交替样式与悬停透明度会立即随新数据刷新——这是验证选项是否真正脚本化的最直观手段。示例模块通过module.exports {actions, config}导出供示例渲染器加载。源码视角RadarController 如何消费脚本化选项从源码结构看脚本化选项的解析发生在控制器更新阶段。src/controllers/controller.radar.js 中RadarController的静态配置明确了雷达图的元素模型static defaults { datasetElementType: line, dataElementType: point, indexAxis: r, showLine: true, elements: { line: { fill: start } }, }; static overrides { aspectRatio: 1, scales: { r: { type: radialLinear, } } };即雷达图的数据集元素是折线、数据元素是点、径向轴索引为r默认启用径向线性刻度且纵横比为 1。在updateElements中每个数据点都会调用this.resolveDataElementOptions(i, ...)——这正是脚本化选项的解析入口随后通过径向刻度定位每个点的极坐标位置const pointPosition scale.getPointPositionForValue(i, this.getParsed(i).r); const x reset ? scale.xCenter : pointPosition.x; const y reset ? scale.yCenter : pointPosition.y; const properties { x, y, angle: pointPosition.angle, skip: isNaN(x) || isNaN(y), options };可以推断resolveDataElementOptions(i, ...)在解析radius、pointStyle等脚本化属性时会构造包含datasetIndex、dataIndex、parsed含r值经_parseObjectDataRadialScale归一为{x, y}内部格式的context再调用脚本化函数——这就是示例中ctx.parsed.y、ctx.dataIndex可用性的底层来源。折线部分则由resolveDatasetElementOptions(mode)解析backgroundColor、borderColor等供线元素绘制填充与描边。完整代码将上述片段组装得到完整可运行的示例配置const DATA_COUNT 7; Utils.srand(110); const actions [ { name: Randomize, handler(chart) { chart.data.datasets.forEach(dataset { dataset.data generateData(); }); chart.update(); } }, ]; function generateData() { return Utils.numbers({ count: DATA_COUNT, min: 0, max: 100 }); } const data { labels: [[Eating, Dinner], [Drinking, Water], Sleeping, [Designing, Graphics], Coding, Cycling, Running], datasets: [{ data: generateData() }] }; function getLineColor(ctx) { return Utils.color(ctx.datasetIndex); } function alternatePointStyles(ctx) { const index ctx.dataIndex; return index % 2 0 ? circle : rect; } function makeHalfAsOpaque(ctx) { return Utils.transparentize(getLineColor(ctx)); } function make20PercentOpaque(ctx) { return Utils.transparentize(getLineColor(ctx), 0.8); } function adjustRadiusBasedOnData(ctx) { const v ctx.parsed.y; return v 10 ? 5 : v 25 ? 7 : v 50 ? 9 : v 75 ? 11 : 15; } const config { type: radar, data: data, options: { plugins: { legend: false, tooltip: false, }, elements: { line: { backgroundColor: make20PercentOpaque, borderColor: getLineColor, }, point: { backgroundColor: getLineColor, hoverBackgroundColor: makeHalfAsOpaque, radius: adjustRadiusBasedOnData, pointStyle: alternatePointStyles, hoverRadius: 15, } } } }; module.exports { actions, config, };延伸阅读Options 与 Scriptable Options 详解选项解析优先级、context 完整字段定义、resolver 第二参数用法Radar 雷达图图表指南全部数据集属性表、Point Styling / Line Styling / Interactions 分类说明、scales.r径向刻度配置Scriptable 示例系列line.md折线版同款脚本化函数、bar.md按ctx.parsed.y分档配色、pie.md与polar.md按数值区间着色的colorize模式可对照学习脚本化选项在不同图表类型上的复用与差异示例工具 Utils 说明 与 docs/scripts/utils.jssrand/numbers/color/transparentize等示例辅助函数的实现注意Utils 属示例专用工具官方文档明确提示不应在生产环境依赖。【免费下载链接】Chart.jsSimple HTML5 Charts using thetag项目地址: https://gitcode.com/gh_mirrors/ch/Chart.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考