Angular Highcharts-在柱状图上绘制标注栏

Angular Highcharts-在柱状图上绘制标注栏,angular,highcharts,Angular,Highcharts,我想显示x轴区域(a到c)之间的plotband。我尝试了以下操作,但仍未检测到plotband 以下是TS代码示例: Highcharts.chart('container', { chart: { type: 'column' }, xAxis: { plotBands: [{ to: 'a', color: "#FFAAAA", from: 'c' }], categories: ["a", "b", "c"

我想显示x轴区域(a到c)之间的plotband。我尝试了以下操作,但仍未检测到plotband

以下是TS代码示例:

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  xAxis: {
    plotBands: [{
      to: 'a',
      color: "#FFAAAA",
      from: 'c'
    }],
    categories: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m"],
    crosshair: true
  },
  yAxis: {
    min: 0,
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [{
    "color": "#8085e9",
    "data": [null, 1, 1, 2, 2, 2, 2, 3, 1, 1, 1, 1, 1],
    "name": "Linux"
  }, {
    "color": "#f15c80",
    "data": [1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, null, null],
    "name": "Others"
  }]
});
Highcharts.chart('container'{
图表:{
类型:“列”
},
xAxis:{
绘图带:[{
致:"a",,
颜色:“ffaaa”,
来自:“c”
}],
类别:[“a”、“b”、“c”、“d”、“e”、“f”、“g”、“h”、“i”、“j”、“k”、“l”、“m”],
十字准星:对
},
亚克斯:{
分:0,,
},
工具提示:{
headerFormat:“{point.key}”,
pointFormat:“{series.name}:”+
“{point.y:.1f}mm”,
页脚格式:“”,
分享:是的,
useHTML:true
},
打印选项:{
专栏:{
点填充:0.2,
边框宽度:0
}
},
系列:[{
“颜色”:“8085e9”,
“数据”:[null,1,1,2,2,2,2,3,1,1,1,1,1],
“名称”:“Linux”
}, {
“颜色”:“f15c80”,
“数据”:[1,2,1,1,1,1,1,1,2,1,1,1,1,null,null],
“姓名”:“其他人”
}]
});

您需要将
from
to
属性设置为数值:

xAxis: {
    plotBands: [{
        to: 2.5,
        color: "#FFAAAA",
        from: -0.5

    }],
    ...
},
现场演示:

API参考: