Highcharts角度仪表(Angular Gauge)完全指南:从速度表到工业监控,一文学会gauge与solidgauge实战开发

最美------Angular gauges 角度仪表

角度仪表也被称为刻度盘或类似速度计的小部件,能够为仪表盘提供极佳的可视化效果。与极坐标图类似,我们扩展了已有的系列/点/轴模型,并将仪表作为一种新的系列类型实现,配备一个数值轴,即 y 轴。这意味着,您在使用其他 Highcharts 系列类型进行动态和静态操作时所学到的内容,也同样适用于角度仪表。

需要注意的一点是,仪表盘没有 x 轴。仪表盘中的 x 轴 完全被移除,主要是为了功能和操作的需要,图表上不会绘制这个轴。

要创建一个角度仪表盘,设置 chart.type to "gauge":

js 复制代码
chart: {
    type: 'gauge'
}

通常一个仪表系列只有一个点,但它也可以处理多个点,就像我们钟表示例中的三个表盘一样。你可以在仪表上添加任意数量的背景元素,让你可以将其风格从极简的默认设计,打造到具有阴影和反射效果的繁复、立体感十足的艺术品,使用线性和径向渐变实现。

实心仪表

自 Highcharts 4 版本起,我们还提供第二种仪表盘类型,称为 solidgauge。它类似于仪表系列,但显示值的颜色为纯色,并且可以响应 Y 轴上的颜色设置,类似于地图中的颜色轴。详细内容请参阅 API.

仪表示例

相关推荐
用户114896694410511 分钟前
Promise解析
javascript·面试
gogoing12 分钟前
Prettier 配置说明
前端·javascript
前端毕业班14 分钟前
uni-app onShareAppMessage hook 原理分析
前端·javascript
gogoing18 分钟前
Babel 配置与工具
前端·javascript
蜡台1 小时前
Vue3 Hook 与 Store 状态管理:深度解析与选型指南
前端·javascript·vue.js
存在的五月雨1 小时前
项目中 Vitest 配置详解:vitest.config.ts
开发语言·javascript·vue.js
淡笑沐白1 小时前
JavaScript零基础到精通
开发语言·javascript·ecmascript
openKaka_2 小时前
beginWork 的第一站:HostRoot 如何把 App 接入 Fiber 树
前端·javascript·react.js
YOU OU2 小时前
HTML+CSS+JavaScript
前端·javascript·css·html
尽欢i3 小时前
前端大坑!文件切片上传后端总报错找不到文件名?
前端·javascript