javascript - 如何在 Highcharts 的 "plotLines text"上添加框

Question

嗨，我尝试了多种方法将文本框添加到“plotLines”。但我不知道该怎么做，所以我提出疑问。

情节线的时间继续在一分钟内移动。我想将情节线的当前时间文本包装到一个白框中。

详情请引用jsfiddle和图片。

jsFiddle - https://jsfiddle.net/develkarmy/9w6czou5/

var ctime = new Date();

Highcharts.chart('container', {
chart: {
    type: 'areaspline',
    plotBackgroundImage: 'http://www.khoa.go.kr/swtc/inc/img/chart/background.jpg',
    width: 700
},
title: {
    text: 'Average fruit consumption during one week'
},
xAxis: {
plotLines: [{ // mark the weekend
        color: 'white',
        width: 3,
        value: Date.UTC(ctime.getFullYear(), (ctime.getMonth() + 1), ctime.getDate(), ctime.getHours(), ctime.getMinutes()),
        dashStyle: 'solid',
        zIndex: 4,
        label: {
        text: (ctime.getHours() + ':' + ctime.getMinutes()),
        verticalAlign: 'middle',
        align: 'center',
        rotation: 0,
        style: {
                color: '#000',
                fontWeight: 'bold'
            }
        }
    }],
    type: 'datetime',
    //Sets tickInterval to 24 * 3600 * 1000 if display is by day
    tickInterval: 3600 * 3000,
    min: Date.UTC(ctime.getFullYear(), (ctime.getMonth() + 1), ctime.getDate()),
    max: Date.UTC(ctime.getFullYear(), (ctime.getMonth() + 1), (ctime.getDate() + 1)),
    dateTimeLabelFormats : {
        hour: '%H',
        day: '%H'
    },
    tickWidth: 0,
    gridLineWidth: 1,
    gridLineDashStyle: "ShortDot",
    gridLineColor: "#c1c2c3",
    startOnTick: true
},
yAxis: {
    tickInterval: 100,
    title: {
        text: '(cm)',
        align: 'high',
        offset: 15,
        rotation: 0,
        y: -10
    },
    tickWidth: 0,
    gridLineWidth: 1,
    gridLineDashStyle: "ShortDot",
    gridLineColor: "#c1c2c3",
    startOnTick: true
},
tooltip: {
    enabled: false
},
credits: {
    enabled: false
},
plotOptions: {
    areaspline: {
        fillOpacity: 0.5
    }
},
legend: {
    enabled: false
},
series: [{
    data: [
        {
            x: Date.UTC(ctime.getFullYear(), (ctime.getMonth() + 1), (ctime.getDate() - 1), 00, 00),
            y: 586,
            marker: {
                enabled: false
            }
        }, 
        {
            x: Date.UTC(ctime.getFullYear(), (ctime.getMonth() + 1), ctime.getDate(), 4, 18),
            y: 211,
            marker: {
                symbol: 'url(http://www.khoa.go.kr/swtc/inc/img/chart/graph_down.png)'
            }
        }, 
        {
            x: Date.UTC(ctime.getFullYear(), (ctime.getMonth() + 1), ctime.getDate(), 10, 48),
            y: 744,
            marker: {
                symbol: 'url(http://www.khoa.go.kr/swtc/inc/img/chart/graph_up.png)'
            }
        },
        {
            x: Date.UTC(ctime.getFullYear(), (ctime.getMonth() + 1), ctime.getDate(), 17, 13),
            y: 244,
            marker: {
                symbol: 'url(http://www.khoa.go.kr/swtc/inc/img/chart/graph_down.png)'
            }
        },
        {
            x: Date.UTC(ctime.getFullYear(), (ctime.getMonth() + 1), ctime.getDate(), 23, 17),
            y: 668,
            marker: {
                symbol: 'url(http://www.khoa.go.kr/swtc/inc/img/chart/graph_up.png)'
            }
        },
        {
            x: Date.UTC(ctime.getFullYear(), (ctime.getMonth() + 1), (ctime.getDate() + 1), 2, 17),
            y: 200,
            marker: {
                symbol: 'url(http://www.khoa.go.kr/swtc/inc/img/chart/graph_up.png)'
            }
        }
    ]
}]
});

Answer 1

xAxis 的

plotLines 如下

Fiddle demo

    plotLines: [{ // mark the weekend
        color: 'white',
        width: 3,
        value: Date.UTC(ctime.getFullYear(), (ctime.getMonth() + 1), ctime.getDate(), ctime.getHours(), ctime.getMinutes()),
        dashStyle: 'solid',
        zIndex: 4,
        label: {
        text: (ctime.getHours() + ':' + ctime.getMinutes()),
        verticalAlign: 'middle',
        align: 'right', //placement of label
        x:-15,  //adjustment of label
        rotation: 0,
        useHTML: true, //enables html 
        style: {
                borderRadius:"10px",
                padding:'10px 30px',
                backgroundColor:"white",
                color: 'black',
                fontWeight: 'bold'
            }
        }
    }],