Angular Highcharts-在柱状图上绘制标注栏
我想显示x轴区域(a到c)之间的plotband。我尝试了以下操作,但仍未检测到plotband 以下是TS代码示例: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"
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参考: