1、在x轴上值为3的地方画一条红色的宽度为2px的线

2、在y轴画一条和x轴一样的红色的2px的线

  1. // ... 省略代码
  2. plotLines:[{
  3. color:'red', //线的颜色,定义为红色
  4. value:3, //定义在那个值上显示标示线,这里是在x轴上刻度为3的值处垂直化一条线
  5. width:2 //标示线的宽度,2px
  6. }]
  7. }

上述定义的两个标示线效果如下图所示:

标示线是x轴或y轴上的标记特殊刻度的线,它的属性包括了颜色,事件,id,标签,和zIndex层叠,常见属性如下表所示:

标签是对标示线的一个文字说明,文本值默认会显示在标示线的上部。给标示线添加一个标签的实例代码如下:

2、dashStyle :线条样式

Highcharts线条样式

上图所示的线条样式同样适用于Highcharts图表中所有线条

Highcharts为标示线提供了很多相关事件,详细描述如下

  1. plotLines:[{
  2. //..., 省略代码
  3. click:function(){
  4. //当标示线被单击时,触发的事件
  5. },
  6. mouseover:function(){
  7. //当标示线被鼠标悬停时,触发的事件
  8. mouseout:function(){
  9. //当标示线被鼠标移出时,触发的事件
  10. },
  11. mousemove:function(){
  12. //当标示线被鼠标移动(时,触发的事件
  13. }
  14. }
  15. }]

更多关于标题的属性请参考API文档:xAxis plotLines

Highcharts提供了相应的函数方便在图表绘制完毕后对标示线动态的增加或删除操作。

1、增加标示线

可以通过 addPlotLine() 函数增加标示线,该函数的构造如下

Highcharts提供函数 removePlotLine() 供动态删除标示线,removePlotLine ()函数结构如下: removePlotLine (id)

参数说明:

  • id:标示线的id,不存在该id时,该函数式无效的
    实例代码:

通过上述的两个方法,addPlotLine()和removePlotLine(),可以动态的实现增加和删除标示线;需要注意的是,需要进行删除的标示线,在新增或初始化的时候需要给其id属性赋唯一的值,如果不存在id,removePlotLine() 会失效。

3、 仪表图和雷达图中的标示线

在仪表图(gauge)和雷达图(polar)中,定义在x轴上的标示线将会显示一条直线,定义在y轴上的标示线将会显示一个同心圆。