HighCharts带标识区域的曲线图与区域划分带

前段时间由于项目需要, 需要做一张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'
        }
    }
});

结果如图: