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

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

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

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

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

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

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

实心仪表

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

仪表示例

相关推荐
css趣多多3 小时前
Vue 响应式无限递归问题总结
前端·javascript·vue.js
强子感冒了5 小时前
JavaScript 零基础入门笔记:核心概念与语法详解
开发语言·javascript·笔记
FindYou.6 小时前
基于mdEditor实现数据的存储和回显(导出pdf&表情包&目录)
javascript·vue
SuperEugene6 小时前
数组查找与判断:find / some / every / includes 的正确用法
前端·javascript
phltxy7 小时前
Vue进阶实战:自定义指令与插槽的核心用法及实战案例
前端·javascript·vue.js
Never_Satisfied8 小时前
在JavaScript / HTML中,触发某个对象的click事件
开发语言·javascript·html
许同8 小时前
JS-WPS 自动化办公(5)多Sheet整合
开发语言·前端·javascript
_OP_CHEN8 小时前
【前端开发之JavaScript】(四)JS基础语法下篇:函数与对象核心要点深度解析
开发语言·前端·javascript·界面开发·前端开发·网页开发·语法基础
强子感冒了8 小时前
JavaScript学习笔记:函数、方法与继承(原型与class)
javascript·笔记·学习