Highcharts 测量图

Highcharts 测量图 （Hightcharts Gauge）是一种用于展示单值的仪表盘式图表。可以展示简单的指针示数，表达范围的颜色刻度，以及多个测量指标的比较图表。 Highcharts 测量图具有灵活性强、可配置性高且易于使用的特点。

测量图的数据格式

Highcharts 测量图需要以下几个关键数据点：

• value：展示的数值，是一个数字。
• min ：最小值，是一个数字，决定了测量图刻度的最小值。
• max ：最大值，是一个数字，决定了测量图刻度的最大值。
• title：测量图的标题，是一个字符串。
• subtitle：测量图的副标题，是一个字符串。
• data：多个指针赋值，是一个数值型数组。

Highcharts 测量图的语法

Highcharts测量图的语法如下：

{
   chart: {},
   title: {},
   subtitle: {},
   pane: {},
   tooltip: {},
   yAxis: {},
   plotOptions: {},
   series: {}
}

各项参数解释如下：

• chart：本地化配置，包括导出选项，渲染设备等
• title：包括测量图标题
• subtitle：包括测量图副标题
• pane：高级导出设置
• tooltip：此参数在测量图中会显示指针当前数值和指针信息
• yAxis：关于自动标签间距以及min、max、tickInterval的配置
• plotOptions：关于thresholds（一根红线）、outside以及dataLabels等语法控制测量图外观
• series：这个参数中的字段是直接关联至图表上的数据。

测量图的外观

Highcharts测量图的外观支持个性化定制。通过配置参数和自定义CSS实现个性化的需求。支持的配置参数包括：

• backgroundColor：测量图背景
• pane-->background：背景颜色配置
• pane-->startAngle：开始角度
• pane-->endAngle：结束角度
• pane-->background.radius：圆角边框大小
• title-->text：标题文本
• subtitle-->text：副标题文本
• title-->style-->color：标题颜色
• subtitle-->style.color：副标题颜色

测量图的实际应用

测量图在很多业务场景中得到了广泛应用，例如：

• 展示销售额等业务指标
• 展示工厂中生产速率的动态数据
• 展示计数器的实时变化
• 展示任务进度的情况

教程中附上测量图demo，利用这些参数和方法实现属于我们自己的测量图吧！