前段时间由于项目需要, 需要做一张HighCharts的图表, 表中y轴要显示出不同的区域, 且每个区域包含多条线代表不同的监控指标, 当存在告警时, 所在的线数据点变红, 且发生告警时x轴要显示背景颜色标识. 在此记录一下
Highcharts.setOptions({
global: {
useUTC: true
}
});
var chart = Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: '系统健康状态'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats:{
minute:'%H:%M',
hour:'%H:%M'
},
plotBands: [{ // 区域划分带,在产生告警时, 将纵向产生背景颜色
color: '#FCFFC5',
from: Date.UTC(2018, 0, 18,09,35),
to: Date.UTC(2018, 0, 18,09,38),
}]
},
yAxis: {
title: {
text: ''
},
labels: {
enabled: false
},
min: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // Light air
from: 0,
to: 1.5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'XP',
style: {
color: '#606060'
}
}
}, { // Light breeze
from: 2.25,
to: 3.5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'BP',
style: {
color: '#606060'
}
}
}, { // Gentle breeze
from: 4,
to: 5.5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: '报盘',
style: {
color: '#606060'
}
}
}, { // Moderate breeze
from: 6,
to: 7.5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'DB',
style: {
color: '#606060'
}
}
}]
},
tooltip: {
valueSuffix: ' 个告警'
},
plotOptions: {
spline: {
lineWidth: 1,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
pointInterval: 60 * 1000, // one minute
pointStart: Date.UTC(2018, 0, 18,09,30),
pointEnd: Date.UTC(2018, 0, 18,10,0)
}
},
series: [{
name: 'KCXP日志',
data: [1, 1, 1, 1, 1, 1, {y:1, marker:{radius: 2,fillColor: "red",enabled: true}}, {y:1, marker:{radius: 2,fillColor: "red",enabled: true}}, 1, 1, 1,1, 1,1, 1, 1, 1, 1, 1, 1]
}, {
name: 'XP状态',
data: [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5,0.5, 0.5,0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5]
}, {
name: 'XP队列堆积',
data: [0.75, 0.75, 0.75, 0.75, 0.75, 0.75, 0.75, 0.75, 0.75, 0.75, 0.75,0.75, 0.75,0.75, 0.75, 0.75, 0.75, 0.75, 0.75, 0.75]
}, {
name: 'KCBP日志',
data: [3.25, 3.25, 3.25, 3.25, 3.25, 3.25, 3.25, 3.25, 3.25, 3.25, 3.25,3.25, 3.25,3.25, 3.25, 3.25, 3.25, 3.25, 3.25, 3.25]
}, {
name: 'BP磁盘',
data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3,3, 3,3, 3, 3, 3, 3, 3, 3]
}, {
name: 'BP进程繁忙',
data: [2.75, 2.75, 2.75, 2.75, 2.75, 2.75, 2.75, 2.75, 2.75, 2.75, 2.75,2.75, 2.75,2.75, 2.75, 2.75, 2.75, 2.75, 2.75, 2.75]
}, {
name: '报盘1',
data: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,5, 5,5, 5, 5, 5, 5, 5, 5]
}, {
name: '报盘2',
data: [4.5, 4.5, 4.5, 4.5, 4.5, 4.5, 4.5, 4.5, 4.5, 4.5, 4.5,4.5, 4.5,4.5, 4.5, 4.5, 4.5, 4.5, 4.5, 4.5]
}, {
name: 'DB1',
data: [6.5, 6.5, 6.5, 6.5, 6.5, 6.5, 6.5, 6.5, 6.5, 6.5, 6.5,6.5, 6.5,6.5, 6.5, 6.5, 6.5, 6.5, 6.5, 6.5]
}, {
name: 'DB2',
data: [7, 7, 7, 7, 7, 7, 7, 7,7, 7, 7,7, 7,7, 7, 7, 7, 7, 7, 7]
}],
navigation: {
menuItemStyle: {
fontSize: '10px'
}
}
});
结果如图: