Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/41.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在“上添加框”;“绘图线文字”;海图_Javascript_Css_Highcharts - Fatal编程技术网

Javascript 如何在“上添加框”;“绘图线文字”;海图

Javascript 如何在“上添加框”;“绘图线文字”;海图,javascript,css,highcharts,Javascript,Css,Highcharts,嗨,我尝试了几种方法将文本框添加到“绘图线”。但我不知道怎么做,所以我质疑 绘制线的时间在一分钟内继续移动。我想将绘图线的当前时间文本包装到白色框中 有关详细信息,请参考JSFIDLE和图像 jsFiddle- xAxis的plotLines如下所示 xAxis的绘图线将如下所示 哦,我的天啊……我受了几天苦。非常感谢你!哦,我的天啊……我受了几天苦。非常感谢你! var ctime = new Date(); Highcharts.chart('container', { chart:

嗨,我尝试了几种方法将文本框添加到“绘图线”。但我不知道怎么做,所以我质疑

绘制线的时间在一分钟内继续移动。我想将绘图线的当前时间文本包装到白色框中

有关详细信息,请参考JSFIDLE和图像

jsFiddle-


xAxis的
plotLines
如下所示


xAxis
的绘图线将如下所示


哦,我的天啊……我受了几天苦。非常感谢你!哦,我的天啊……我受了几天苦。非常感谢你!
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)'
            }
        }
    ]
}]
});
    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'
            }
        }
    }],