拓冰网站定制 
物联网后端数据可视化消息队列【免费下载链接】thingsboardAll-in-one IoT Platform - Device management, data collection, processing and visualization.项目地址https://gitcode.com/GitHub_Trending/th/thingsboard点击查看免费下载本指南讲解 ThingsBoard 前端ui-ngxFlot 图表 Widget 中点形状绘制函数Point shape draw function的完整用法包括函数签名与 5 个参数ctx、x、y、radius、shadow的语义如何通过该函数用 Canvas 2D API 绘制任意自定义数据点形状以及开箱即用的方形、圆形、菱形、三角形、十字、椭圆、加号 7 种标准示例。读者读完可以独立完成 Flot 折线图/柱状图数据点的任意自定义造型并理解它在前端 Widget 中的配置入口与底层编译执行机制。功能定位让 Flot 图表的数据点形状不再局限于内置图形ThingsBoard 的 Flot 图表 Widget时间序列折线图、柱状图等在显示数据点时默认提供了circle圆、cross十字、diamond菱形、square方形、triangle三角形等内置点形状。当内置形状无法满足需求时可以在数据键Data Key设置中把点形状切换为Custom function自定义函数由开发者提供一个 JavaScript 函数在图表绘制阶段用 Canvas 2D API 现场绘制每个数据点的形状。该文档定义的就是这个自定义点形状函数原文档。在 ThingsBoard 源码中它由设置面板的helpIdwidget/lib/flot/point_shape_format_fn直接挂接为帮助文档见 flot-key-settings.component.html即用户点开点形状绘制函数编辑器的帮助按钮时看到的就是本文内容。函数签名与参数详解自定义点形状函数的签名如下function (ctx, x, y, radius, shadow): void这是一个纯绘制函数不返回任何值所有渲染工作都通过第一个参数ctx完成。各参数语义如下参数类型说明ctxCanvasRenderingContext2DCanvas 2D 绘图上下文提供rect、arc、moveTo、lineTo、fill、stroke等全部 Canvas 绘图 APIxnumber数据点中心的 X 坐标像素ynumber数据点中心的 Y 坐标像素radiusnumber数据点的半径像素由显示点半径showPointsRadius设置决定shadowboolean是否处于阴影绘制阶段为true时通常应绘制简化或不透明的形状为false时绘制正式形状shadow 参数的正确用法Flot 在绘制高亮、动画或某些交互效果时会以阴影模式再次调用符号函数。开发时通常用if (!shadow) { ... }把复杂路径包裹起来避免阴影阶段重复绘制或绘制出不想要的效果。这一点在官方示例的三角形、椭圆中体现得最明显见下文示例。内置 7 个绘制示例从简单到进阶原文档给出了 7 个可直接复用的绘制函数下面逐一给出并补充原理说明。1. 绘制方形Squarevar size radius * Math.sqrt(Math.PI) / 2; ctx.rect(x - size, y - size, size size, size size); {:copy-code}要点通过radius * Math.sqrt(Math.PI) / 2计算半边长size使得该方形的面积与半径radius的圆面积大致相等视觉上与圆形数据点保持相近的大小感以(x, y)为中心构造一个size * 2见方的矩形路径。由于只构建了路径rect最终由 Flot 统一执行fill/stroke函数本身无需也不应调用ctx.fill()。2. 绘制圆形Circlectx.moveTo(x radius, y); ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false); {:copy-code}要点先moveTo到圆弧起点再用arc(x, y, radius, 0, angle, false)绘制圆弧。这里展示了shadow参数的典型用法——阴影阶段只画半个圆弧Math.PI正常阶段画完整圆Math.PI * 2。false表示顺时针方向。3. 绘制菱形Diamondvar size radius * Math.sqrt(Math.PI / 2); ctx.moveTo(x - size, y); ctx.lineTo(x, y - size); ctx.lineTo(x size, y); ctx.lineTo(x, y size); ctx.lineTo(x - size, y); ctx.lineTo(x, y - size); {:copy-code}要点radius * Math.sqrt(Math.PI / 2)得到菱形半对角线长size用moveTo 4 次lineTo依次连接左、上、右、下四个顶点闭合路径最后一笔再回到上顶点是为了补全描边端点。4. 绘制三角形Trianglevar size radius * Math.sqrt(2 * Math.PI / Math.sin(Math.PI / 3)); var height size * Math.sin(Math.PI / 3); ctx.moveTo(x - size / 2, y height / 2); ctx.lineTo(x size / 2, y height / 2); if (!shadow) { ctx.lineTo(x, y - height / 2); ctx.lineTo(x - size / 2, y height / 2); ctx.lineTo(x size / 2, y height / 2); } {:copy-code}要点用三角函数sin(Math.PI / 3)即正三角形 60° 角计算边长与高绘制等边三角形同时是!shadow分支写法的典范——阴影阶段仅画一条底线正常阶段才闭合完整三角形。5. 绘制十字Crossvar size radius * Math.sqrt(Math.PI) / 2; ctx.moveTo(x - size, y - size); ctx.lineTo(x size, y size); ctx.moveTo(x - size, y size); ctx.lineTo(x size, y - size); {:copy-code}要点绘制两条交叉对角线构成X形十字。注意两条线之间用moveTo抬笔避免把两条线段错误连成一条折线。这也是 ThingsBoard 默认pointShapeFormatter使用的形状见下文默认值说明。6. 绘制椭圆Ellipseif (!shadow) { ctx.moveTo(x radius, y); ctx.arc(x, y, radius, 0, Math.PI * 2, false); } {:copy-code}要点当半径参数为等比缩放时arc绘制的实际上是一个以radius为半径的圆若希望在水平/垂直方向产生椭圆效果可在代码中分别用radius的系数如radius * 1.5、radius * 0.6作为arc的横纵缩放来绘制。这里同样只在非阴影阶段绘制完整圆弧。7. 绘制加号Plusvar size radius * Math.sqrt(Math.PI / 2); ctx.moveTo(x - size, y); ctx.lineTo(x size, y); ctx.moveTo(x, y size); ctx.lineTo(x, y - size); {:copy-code}要点一条水平线段加一条垂直线段组成形两条线段之间同样通过moveTo抬笔保证不相连。配置入口在数据键设置中使用自定义点形状在 ThingsBoard 界面中启用自定义点形状的完整路径进入Time series时间序列折线图/柱状图 Widget 编辑模式打开数据Data配置点击某条数据键Data Key的高级/设置在Points settings点设置面板中打开Show points显示点将Point shape点形状下拉框切换为Custom function自定义函数此时会展开一个tb-js-funcJavaScript 函数编辑器其标注的函数参数即为[ctx, x, y, radius, shadow]在编辑器中粘贴上文的任意示例代码或自研绘制代码保存即可实时看到效果。对应源码位置flot-key-settings.component.html 中showPointShape下拉框提供circle、cross、diamond、square、triangle、custom六个选项且仅当选中的是custom时[class.!hidden]判断才显示点形状绘制函数编辑器编辑器通过helpId关联本文档表单默认值为pointShape: [circle, []]、pointShapeFormatter: [, []]见 flot-key-settings.component.ts。此外只有开启显示点后pointShape与pointShapeFormatter控件才会被启用否则被 disable见同一文件 flot-key-settings.component.ts。底层原理函数如何被编译并接入 Flot 绘制流程ThingsBoard 前端在把数据键设置转换为 Flot 序列series时完成了自定义形状函数的编译与注入核心代码位于 flot-widget.tsseries.points { show: false, radius: 8 }; if (keySettings.showPoints true) { series.points.show true; series.points.lineWidth isDefined(keySettings.showPointsLineWidth) ? keySettings.showPointsLineWidth : 5; series.points.radius isDefined(keySettings.showPointsRadius) ? keySettings.showPointsRadius : 3; series.points.symbol isDefined(keySettings.showPointShape) ? keySettings.showPointShape : circle; if (series.points.symbol custom keySettings.pointShapeFormatter) { try { series.points.symbol new Function(ctx, x, y, radius, shadow, keySettings.pointShapeFormatter); } catch (e) { series.points.symbol circle; } } }关键机制如下编译时机只有数据键设置中showPointShape custom且提供了pointShapeFormatter字符串时才执行new Function(ctx, x, y, radius, shadow, keySettings.pointShapeFormatter)把用户代码编译成函数对象并赋给series.points.symbol降级保护整个编译包裹在try/catch中一旦用户代码有语法错误或编译异常自动回退为内置circle圆点避免图表崩溃符号调用Flot 库在绘制每个数据点时会用(ctx, x, y, radius, shadow)五个参数调用series.points.symbol其中radius对应上面赋值的series.points.radius默认 3可在设置中调整点半径shadow由 Flot 的绘图阶段决定半径联动函数体内所有几何计算都基于参数radius因此调整数据键设置中的showPointsRadius时自定义形状会按比例整体缩放无需修改函数代码。另外TbFlotKeySettings接口完整声明了showPointShape: string与pointShapeFormatter: string两个字段见 flot-widget.models.ts而默认数据键设置flotDataKeyDefaultSettings中的pointShapeFormatter默认值正是十字形状的代码见 flot-key-settings.component.ts与上文的 Cross 示例完全一致。与其他图表类型的关系及注意事项需要区分的是该文档只适用于 Flot 图表Time series、柱状图等ThingsBoard 新一代基于 ECharts 的图表如 Time series chart ECharts、雷达图、最新值图表使用的是枚举ChartShapeemptyCircle、circle、rect、roundRect、triangle、diamond、pin、arrow、none见 chart.models.ts直接以字符串形式赋给series.symbol见 radar-chart.ts、time-series-chart.models.ts不支持自定义绘制函数。编写自定义绘制函数时的注意事项只构建路径不执行填充/描边函数只需要调用moveTo、lineTo、arc、rect等构造路径的 APIfill与stroke由 Flot 统一执行否则可能出现重复渲染或颜色异常路径必须闭合若绘制封闭形状方形、菱形、三角形应保证最后一个点与起点重合否则描边会出现缺口正确处理shadow参数建议在复杂形状中参考示例用if (!shadow) { ... }包裹正式绘制逻辑始终基于radius做几何缩放不要写死像素尺寸否则点半径设置改变后形状不跟随缩放保持代码简洁该函数对每个数据点、每个重绘周期都会执行过于复杂的计算会拖慢图表渲染语法错误会静默回退为圆点编译失败时 ThingsBoard 自动降级为circle排查问题时优先检查函数编辑器中的 JS 语法。小结Point shape draw function 是 ThingsBoard Flot 图表数据点渲染的最后一道定制入口通过一个接收(ctx, x, y, radius, shadow)五个参数的 Canvas 绘制函数即可把数据点渲染成任意自定义图形。本指南覆盖了函数签名、7 个标准示例、界面配置路径、源码编译执行机制与降级策略开发者可直接复制示例代码到 点形状绘制函数编辑器 中使用并参考 flot-widget.ts 理解其底层实现。赞分享物联网后端数据可视化消息队列【免费下载链接】thingsboardAll-in-one IoT Platform - Device management, data collection, processing and visualization.项目地址https://gitcode.com/GitHub_Trending/th/thingsboard点击查看免费下载相关推荐Vega Symbol Mark 完全指南绘制散点、气泡与自定义形状Vega Symbol Mark 完全指南绘制散点、气泡与自定义形状 本指南系统讲解 Vega 可视化语法中 symbol符号标记 的完整用法从内置圆形数据可视化Phaser 4 图形与形状绘制完全指南Graphics 游戏对象与 Shape 形状对象实战Phaser 4 图形与形状绘制完全指南Graphics 游戏对象与 Shape 形状对象实战 本文是 Phaser 4 图形绘制主题的实战指南系统讲解无纹游戏开发图形学前端F2 图形标签Shape完全指南基于 JSX 的 9 大绘图原语与自定义图形实战F2 图形标签Shape完全指南基于 JSX 的 9 大绘图原语与自定义图形实战 F2 是一款面向移动端的优雅、交互式、灵活的图表库其底层依托 G 绘图数据可视化前端上一篇终极指南如何用xiaozhi-esp32-server构建智能质量检测系统下一篇Medusa仪表盘主题定制创建统一品牌风格的界面设计创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ThingsBoard Flot 图表点形状自定义绘制函数（point shape draw function）完全指南
物联网后端数据可视化消息队列【免费下载链接】thingsboardAll-in-one IoT Platform - Device management, data collection, processing and visualization.项目地址https://gitcode.com/GitHub_Trending/th/thingsboard点击查看免费下载本指南讲解 ThingsBoard 前端ui-ngxFlot 图表 Widget 中点形状绘制函数Point shape draw function的完整用法包括函数签名与 5 个参数ctx、x、y、radius、shadow的语义如何通过该函数用 Canvas 2D API 绘制任意自定义数据点形状以及开箱即用的方形、圆形、菱形、三角形、十字、椭圆、加号 7 种标准示例。读者读完可以独立完成 Flot 折线图/柱状图数据点的任意自定义造型并理解它在前端 Widget 中的配置入口与底层编译执行机制。功能定位让 Flot 图表的数据点形状不再局限于内置图形ThingsBoard 的 Flot 图表 Widget时间序列折线图、柱状图等在显示数据点时默认提供了circle圆、cross十字、diamond菱形、square方形、triangle三角形等内置点形状。当内置形状无法满足需求时可以在数据键Data Key设置中把点形状切换为Custom function自定义函数由开发者提供一个 JavaScript 函数在图表绘制阶段用 Canvas 2D API 现场绘制每个数据点的形状。该文档定义的就是这个自定义点形状函数原文档。在 ThingsBoard 源码中它由设置面板的helpIdwidget/lib/flot/point_shape_format_fn直接挂接为帮助文档见 flot-key-settings.component.html即用户点开点形状绘制函数编辑器的帮助按钮时看到的就是本文内容。函数签名与参数详解自定义点形状函数的签名如下function (ctx, x, y, radius, shadow): void这是一个纯绘制函数不返回任何值所有渲染工作都通过第一个参数ctx完成。各参数语义如下参数类型说明ctxCanvasRenderingContext2DCanvas 2D 绘图上下文提供rect、arc、moveTo、lineTo、fill、stroke等全部 Canvas 绘图 APIxnumber数据点中心的 X 坐标像素ynumber数据点中心的 Y 坐标像素radiusnumber数据点的半径像素由显示点半径showPointsRadius设置决定shadowboolean是否处于阴影绘制阶段为true时通常应绘制简化或不透明的形状为false时绘制正式形状shadow 参数的正确用法Flot 在绘制高亮、动画或某些交互效果时会以阴影模式再次调用符号函数。开发时通常用if (!shadow) { ... }把复杂路径包裹起来避免阴影阶段重复绘制或绘制出不想要的效果。这一点在官方示例的三角形、椭圆中体现得最明显见下文示例。内置 7 个绘制示例从简单到进阶原文档给出了 7 个可直接复用的绘制函数下面逐一给出并补充原理说明。1. 绘制方形Squarevar size radius * Math.sqrt(Math.PI) / 2; ctx.rect(x - size, y - size, size size, size size); {:copy-code}要点通过radius * Math.sqrt(Math.PI) / 2计算半边长size使得该方形的面积与半径radius的圆面积大致相等视觉上与圆形数据点保持相近的大小感以(x, y)为中心构造一个size * 2见方的矩形路径。由于只构建了路径rect最终由 Flot 统一执行fill/stroke函数本身无需也不应调用ctx.fill()。2. 绘制圆形Circlectx.moveTo(x radius, y); ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false); {:copy-code}要点先moveTo到圆弧起点再用arc(x, y, radius, 0, angle, false)绘制圆弧。这里展示了shadow参数的典型用法——阴影阶段只画半个圆弧Math.PI正常阶段画完整圆Math.PI * 2。false表示顺时针方向。3. 绘制菱形Diamondvar size radius * Math.sqrt(Math.PI / 2); ctx.moveTo(x - size, y); ctx.lineTo(x, y - size); ctx.lineTo(x size, y); ctx.lineTo(x, y size); ctx.lineTo(x - size, y); ctx.lineTo(x, y - size); {:copy-code}要点radius * Math.sqrt(Math.PI / 2)得到菱形半对角线长size用moveTo 4 次lineTo依次连接左、上、右、下四个顶点闭合路径最后一笔再回到上顶点是为了补全描边端点。4. 绘制三角形Trianglevar size radius * Math.sqrt(2 * Math.PI / Math.sin(Math.PI / 3)); var height size * Math.sin(Math.PI / 3); ctx.moveTo(x - size / 2, y height / 2); ctx.lineTo(x size / 2, y height / 2); if (!shadow) { ctx.lineTo(x, y - height / 2); ctx.lineTo(x - size / 2, y height / 2); ctx.lineTo(x size / 2, y height / 2); } {:copy-code}要点用三角函数sin(Math.PI / 3)即正三角形 60° 角计算边长与高绘制等边三角形同时是!shadow分支写法的典范——阴影阶段仅画一条底线正常阶段才闭合完整三角形。5. 绘制十字Crossvar size radius * Math.sqrt(Math.PI) / 2; ctx.moveTo(x - size, y - size); ctx.lineTo(x size, y size); ctx.moveTo(x - size, y size); ctx.lineTo(x size, y - size); {:copy-code}要点绘制两条交叉对角线构成X形十字。注意两条线之间用moveTo抬笔避免把两条线段错误连成一条折线。这也是 ThingsBoard 默认pointShapeFormatter使用的形状见下文默认值说明。6. 绘制椭圆Ellipseif (!shadow) { ctx.moveTo(x radius, y); ctx.arc(x, y, radius, 0, Math.PI * 2, false); } {:copy-code}要点当半径参数为等比缩放时arc绘制的实际上是一个以radius为半径的圆若希望在水平/垂直方向产生椭圆效果可在代码中分别用radius的系数如radius * 1.5、radius * 0.6作为arc的横纵缩放来绘制。这里同样只在非阴影阶段绘制完整圆弧。7. 绘制加号Plusvar size radius * Math.sqrt(Math.PI / 2); ctx.moveTo(x - size, y); ctx.lineTo(x size, y); ctx.moveTo(x, y size); ctx.lineTo(x, y - size); {:copy-code}要点一条水平线段加一条垂直线段组成形两条线段之间同样通过moveTo抬笔保证不相连。配置入口在数据键设置中使用自定义点形状在 ThingsBoard 界面中启用自定义点形状的完整路径进入Time series时间序列折线图/柱状图 Widget 编辑模式打开数据Data配置点击某条数据键Data Key的高级/设置在Points settings点设置面板中打开Show points显示点将Point shape点形状下拉框切换为Custom function自定义函数此时会展开一个tb-js-funcJavaScript 函数编辑器其标注的函数参数即为[ctx, x, y, radius, shadow]在编辑器中粘贴上文的任意示例代码或自研绘制代码保存即可实时看到效果。对应源码位置flot-key-settings.component.html 中showPointShape下拉框提供circle、cross、diamond、square、triangle、custom六个选项且仅当选中的是custom时[class.!hidden]判断才显示点形状绘制函数编辑器编辑器通过helpId关联本文档表单默认值为pointShape: [circle, []]、pointShapeFormatter: [, []]见 flot-key-settings.component.ts。此外只有开启显示点后pointShape与pointShapeFormatter控件才会被启用否则被 disable见同一文件 flot-key-settings.component.ts。底层原理函数如何被编译并接入 Flot 绘制流程ThingsBoard 前端在把数据键设置转换为 Flot 序列series时完成了自定义形状函数的编译与注入核心代码位于 flot-widget.tsseries.points { show: false, radius: 8 }; if (keySettings.showPoints true) { series.points.show true; series.points.lineWidth isDefined(keySettings.showPointsLineWidth) ? keySettings.showPointsLineWidth : 5; series.points.radius isDefined(keySettings.showPointsRadius) ? keySettings.showPointsRadius : 3; series.points.symbol isDefined(keySettings.showPointShape) ? keySettings.showPointShape : circle; if (series.points.symbol custom keySettings.pointShapeFormatter) { try { series.points.symbol new Function(ctx, x, y, radius, shadow, keySettings.pointShapeFormatter); } catch (e) { series.points.symbol circle; } } }关键机制如下编译时机只有数据键设置中showPointShape custom且提供了pointShapeFormatter字符串时才执行new Function(ctx, x, y, radius, shadow, keySettings.pointShapeFormatter)把用户代码编译成函数对象并赋给series.points.symbol降级保护整个编译包裹在try/catch中一旦用户代码有语法错误或编译异常自动回退为内置circle圆点避免图表崩溃符号调用Flot 库在绘制每个数据点时会用(ctx, x, y, radius, shadow)五个参数调用series.points.symbol其中radius对应上面赋值的series.points.radius默认 3可在设置中调整点半径shadow由 Flot 的绘图阶段决定半径联动函数体内所有几何计算都基于参数radius因此调整数据键设置中的showPointsRadius时自定义形状会按比例整体缩放无需修改函数代码。另外TbFlotKeySettings接口完整声明了showPointShape: string与pointShapeFormatter: string两个字段见 flot-widget.models.ts而默认数据键设置flotDataKeyDefaultSettings中的pointShapeFormatter默认值正是十字形状的代码见 flot-key-settings.component.ts与上文的 Cross 示例完全一致。与其他图表类型的关系及注意事项需要区分的是该文档只适用于 Flot 图表Time series、柱状图等ThingsBoard 新一代基于 ECharts 的图表如 Time series chart ECharts、雷达图、最新值图表使用的是枚举ChartShapeemptyCircle、circle、rect、roundRect、triangle、diamond、pin、arrow、none见 chart.models.ts直接以字符串形式赋给series.symbol见 radar-chart.ts、time-series-chart.models.ts不支持自定义绘制函数。编写自定义绘制函数时的注意事项只构建路径不执行填充/描边函数只需要调用moveTo、lineTo、arc、rect等构造路径的 APIfill与stroke由 Flot 统一执行否则可能出现重复渲染或颜色异常路径必须闭合若绘制封闭形状方形、菱形、三角形应保证最后一个点与起点重合否则描边会出现缺口正确处理shadow参数建议在复杂形状中参考示例用if (!shadow) { ... }包裹正式绘制逻辑始终基于radius做几何缩放不要写死像素尺寸否则点半径设置改变后形状不跟随缩放保持代码简洁该函数对每个数据点、每个重绘周期都会执行过于复杂的计算会拖慢图表渲染语法错误会静默回退为圆点编译失败时 ThingsBoard 自动降级为circle排查问题时优先检查函数编辑器中的 JS 语法。小结Point shape draw function 是 ThingsBoard Flot 图表数据点渲染的最后一道定制入口通过一个接收(ctx, x, y, radius, shadow)五个参数的 Canvas 绘制函数即可把数据点渲染成任意自定义图形。本指南覆盖了函数签名、7 个标准示例、界面配置路径、源码编译执行机制与降级策略开发者可直接复制示例代码到 点形状绘制函数编辑器 中使用并参考 flot-widget.ts 理解其底层实现。赞分享物联网后端数据可视化消息队列【免费下载链接】thingsboardAll-in-one IoT Platform - Device management, data collection, processing and visualization.项目地址https://gitcode.com/GitHub_Trending/th/thingsboard点击查看免费下载相关推荐Vega Symbol Mark 完全指南绘制散点、气泡与自定义形状Vega Symbol Mark 完全指南绘制散点、气泡与自定义形状 本指南系统讲解 Vega 可视化语法中 symbol符号标记 的完整用法从内置圆形数据可视化Phaser 4 图形与形状绘制完全指南Graphics 游戏对象与 Shape 形状对象实战Phaser 4 图形与形状绘制完全指南Graphics 游戏对象与 Shape 形状对象实战 本文是 Phaser 4 图形绘制主题的实战指南系统讲解无纹游戏开发图形学前端F2 图形标签Shape完全指南基于 JSX 的 9 大绘图原语与自定义图形实战F2 图形标签Shape完全指南基于 JSX 的 9 大绘图原语与自定义图形实战 F2 是一款面向移动端的优雅、交互式、灵活的图表库其底层依托 G 绘图数据可视化前端上一篇终极指南如何用xiaozhi-esp32-server构建智能质量检测系统下一篇Medusa仪表盘主题定制创建统一品牌风格的界面设计创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考