从十字星到多边形chartjs-plugin-annotation的point、polygon、ellipse注解全解析【免费下载链接】chartjs-plugin-annotationAnnotation plugin for Chart.js项目地址: https://gitcode.com/gh_mirrors/ch/chartjs-plugin-annotation如果你想在 Chart.js 图表上圈出重点区域或精准标记关键点chartjs-plugin-annotation 就是官方注解插件的正确答案。本文聚焦其中三个几何型注解元素——point点、polygon多边形、ellipse椭圆从零讲清它们的定位方式、样式能力和常见坑帮助你在 10 分钟内上手。三种元素各管一件事在动手之前先建立一张心智地图。插件在 src/types/index.js 中注册了全部 6 种注解类型而 point、polygon、ellipse 恰好构成从点到面的几何闭环元素类型适合场景定位依据源码位置point标记单个关键数值中心坐标xValue/yValuesrc/types/point.jspolygon强调一块区域、画靶心或徽章中心坐标 边数sidessrc/types/polygon.jsellipse圈住一段坐标范围边界框xMin/xMax/yMin/yMaxsrc/types/ellipse.js三者的共同点是坐标都使用图表数据单位而不是像素所以窗口缩放、图表变形时注解始终钉在正确的位置上。point 注解十字星、五角星等 10 种标记样式point 注解的本质是在指定坐标画一个图形。最小配置只需三行核心思路type: point、中心坐标、pointStyle样式。它最有意思的地方在pointStyle。绘制逻辑位于 src/helpers/helpers.canvas.js 的drawPointStyle函数支持以下全部样式pointStyle 值视觉效果circle默认实心圆点cross十字标题里的十字星就是它crossRot旋转 45° 的米字星star五角星triangle正三角形rect/rectRot正方形 / 菱形rectRounded圆角正方形line/dash横线 / 短线此外pointStyle还支持直接传入img或canvas对象实现自定义图标标记。常用定位选项一览xValue/yValue点中心的坐标数据单位两者均可省略——缺省时取对应轴的中心radius半径像素默认 10rotation整体旋转角度度配合cross、star非常实用xAdjust/yAdjust在计算出的位置基础上做像素级微调正负号决定方向z同一drawTime下的绘制层级多个注解重叠时决定谁压在上面一个小技巧如果不想用坐标而想框定范围取中心可以设置xMin/xMax/yMin/yMax并把radius设为 0插件会用该框的中心作为点的位置。polygon 注解用 sides 参数从三角形画到十边形polygon 注解可以画出任意正多边形。核心参数只有两个sides边数默认 3正三角形。设为 4 得到菱形顶点朝上5 是五边形……官方测试目录 test/fixtures/polygon/ 里覆盖了从三角形到十边形decagon的全部常见形态radius中心到顶点的半径像素默认 10旋转与变身rotation控制整体旋转角度。比如sides: 4, rotation: 45就是正放的正方形——这正是 test/fixtures/polygon/square.js 与 test/fixtures/polygon/rhombus.js 的区别。它是怎么画出来的阅读 src/types/polygon.js 的resolveElementProperties会发现一个优雅的设计插件把正多边形拆解成一圈 point 顶点——用三角函数算出每个顶点的坐标依次moveTo/lineTo连线、闭合、填充。也就是说polygon 本质上就是一圈 point 注解的合体甚至支持point子选项来单独给顶点设置半径、颜色等样式。命中检测鼠标悬停判断则使用了经典的射线投射算法见同文件的pointIsInPolygon函数这让多边形可以参与拖拽、点选等交互功能。ellipse 注解用边界框圈住一段坐标范围ellipse 与前两者的中心点定位不同它用四个边界值描述ellipse1: { type: ellipse, xMin: 1, xMax: 2, // 左右边界数据单位 yMin: 50, yMax: 70, // 上下边界数据单位 backgroundColor: rgba(255, 99, 132, 0.25) }横向跨度 纵向跨度时画出来就是正圆不等时则是椭圆任意一个边界省略时椭圆会向该方向自动扩张到图表边缘rotation旋转角度度让椭圆沿任意方向倾斜label椭圆内部居中显示文字可配置字体、颜色、多行内容详见 docs/guide/types/ellipse.md绘制实现在 src/types/ellipse.js 的draw方法先把画布平移到中心并旋转再调用 Canvas 原生ctx.ellipse()一次成型。值得注意的是它的命中检测pointInEllipse——针对旋转后的椭圆做了坐标反向旋转变换因此倾斜椭圆上的鼠标交互依然精准。三者通用的样式设置颜色、虚线、阴影、层级point、polygon、ellipse 共享一整套外观选项这也是插件所有注解类型的通用配置区定义在各元素文件的defaults中选项说明默认值backgroundColor填充色支持rgba半透明—borderColor描边色—borderWidth描边宽度像素1borderDash/borderDashOffset虚线样式与偏移[]shadowBlur/shadowOffsetX/shadowOffsetY阴影模糊度与偏移0backgroundShadowColor/borderShadowColor填充阴影色 / 描边阴影色transparentdisplay是否显示可脚本化隐藏truez绘制层级0想给注解加上发光效果给shadowBlur一个正值、backgroundShadowColor一个颜色即可测试案例 test/fixtures/point/shadow.js 就是标准范例。上手前必读注册方式与适用图表类型最后交代两个新手最容易踩的坑插件必须注册chartjs-plugin-annotation 不能作为内联插件plugins数组使用需要先注册到 Chart.js 全局再在图表配置的plugins.annotation.annotations下声明注解对象只支持双轴以上的图表它适用于 line、bar、scatter、bubble 等使用线性、对数、时间或分类刻度的图表饼图、雷达图、极坐标图没有两个坐标系注解无法工作版本对应Chart.js ≥ 4.0.0 对应插件 3.x 版本写在最后一句话总结三者的选择策略标一个数用 point圈一块范围用 ellipse要强调视觉冲击力就上 polygon。它们的坐标都跟随数据走配置又高度同构——学会一种其余两种只需照抄定位选项即可。想深入了解每种元素的完整选项表推荐对照阅读官方类型文档docs/guide/types/point.md、docs/guide/types/polygon.md、docs/guide/types/ellipse.md。【免费下载链接】chartjs-plugin-annotationAnnotation plugin for Chart.js项目地址: https://gitcode.com/gh_mirrors/ch/chartjs-plugin-annotation创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考