标示带同标示线，只不过标示的内容为一段范围。标示带的作用、事件等很多都类似标示线，这里就只是简单说明标示带的相关内容，不做过多累述。

标示带 - 图1

一、标示带的基本配置

  1. xAxis: {
  2.     // ... 省略代码
  3.     plotBands: [{
  4.         from: ,               // 标示带开始值
  5.         to: ,                 // 标示带结束值
  6.         label: {              // 标示带文字标签配置，详见API
  7.         },
  8.         color: '',            // 标示带背景颜色
  9.         borderWidth: ,        // 标示带边框宽度
  10.         borderColor: ,        // 标示带边框颜色
  11.         id: ,                 // 标示带 id，用于删除等操作
  12.         zIndex:,              // 标示带层叠，用于调整显示层次
  13.         events: {             // 事件，支持 click、mouseover、mouseout、mousemove等事件
  14.             click: function(e) {
  15.             },
  16.             mouseover: function(e) {
  17.             },
  18.             mouseout: function(e) {
  19.             },
  20.             mousemove: function(e) {
  21.             }
  22.         }
  24.     }]
  25. },
  26. yAxis: {
  27.     // ... 省略代码
  28.     plotBands: [{
  29.         // 标示带配置，同上
  30.     }]
  31. }

在线试一试

二、动态增加或删除标示带

同标示线一样，我们可以通过 Axis.addPlotBand 及 Axis.removePlotBand 来动态增加或删除标示线。

1、动态增加标示带

  1. // 实例化图表并保存图表对象
  2. var chart = new Highcharts.Chart();
  4. var axis = chart.xAxis[0];
  6. axis.addPlotBand({
  7.    id: 'myXAxisPlotBand',     // id 用于后续删除用
  8.    from: 20,
  9.    to: 40,
  10.    // ...
  11. });

在线试一试

2、动态删除标示带

  1. var chart = new Highcharts.Chart();
  2. var axis = chart.xAxis[0];
  3. axis.removePlotBand('myXAxisPlotBand');

在线试一试

原文: https://www.hcharts.cn/docs/basic-plotBands