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

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

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

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

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

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

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

实心仪表

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

仪表示例

相关推荐
天天向上102430 分钟前
vue el-table实现拖拽排序
前端·javascript·vue.js
西西学代码44 分钟前
Flutter---回调函数
开发语言·javascript·flutter
卷帘依旧1 小时前
JavaScript 闭包经典问题:为什么输出 10 次 i=10
javascript
柳杉1 小时前
Three.js × Blender:从建模到 Web 3D 的完整工作流深度解析
前端·javascript·数据可视化
用户806138166593 小时前
发布为一个 npm 包
前端·javascript
TT_哲哲3 小时前
小程序双模式(文件 / 照片)上传组件封装与解析
前端·javascript
从文处安4 小时前
「九九八十一难」从回调地狱到异步秩序:深入理解 JavaScript Promise
前端·javascript
进击的尘埃4 小时前
Node.js 子进程管理:child_process 模块的正确打开方式
javascript
angerdream4 小时前
最新版vue3+TypeScript开发入门到实战教程之Pinia详解
前端·javascript·vue.js
怜悯4 小时前
uniapp 如何实现google登录-安卓端
前端·javascript