Question

您好我正在尝试使用自定义当前时间变量，但未从高图的数据值加载变量值。

我想将当前时间值生成为变量并将其输入高级图表。

我做了很多搜索，但似乎无法找到答案。请帮帮我

+所有问题都解决了。上面的代码是完整的代码。 jsFiddle - http://jsfiddle.net/jlbriggs/2qhmhh1c/1/

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: [{
    color: 'white',
    width: 3,
    value: Date.now(), // <-- i want variable input in here!
    dashStyle: 'solid',
    zIndex: 4,
    label: {
    text: 'nowTime',
    verticalAlign: 'middle',
    align: 'center',
    rotation: 0,
    style: {
            color: '#000',
            fontWeight: 'bold'
        }
    }
}],
type: 'datetime',
tickInterval: 3600 * 3000,
min: Date.UTC(2017,5,1),
max: Date.UTC(2017,5,3),
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(2017, 5, 1, 00, 00),
        y: 586,
        marker: {
            enabled: false
        }
    }, 
    {
        x: Date.UTC(2017, 5, 2, 4, 18),
        y: 211,
        marker: {
            symbol: 'url(http://www.khoa.go.kr/swtc/inc/img/chart/graph_down.png)'
        }
    }, 
    {
        x: Date.UTC(2017, 5, 2, 10, 48),
        y: 744,
        marker: {
            symbol: 'url(http://www.khoa.go.kr/swtc/inc/img/chart/graph_up.png)'
        }
    },
    {
        x: Date.UTC(2017, 5, 2, 17, 13),
        y: 244,
        marker: {
            symbol: 'url(http://www.khoa.go.kr/swtc/inc/img/chart/graph_down.png)'
        }
    },
    {
        x: Date.UTC(2017, 5, 2, 23, 17),
        y: 668,
        marker: {
            symbol: 'url(http://www.khoa.go.kr/swtc/inc/img/chart/graph_up.png)'
        }
    },
    {
        x: Date.UTC(2017, 5, 3, 2, 17),
        y: 200,
        marker: {
            symbol: 'url(http://www.khoa.go.kr/swtc/inc/img/chart/graph_up.png)'
        }
    }
]
}]
});

Answer 1

问题是您正在使用日期元素创建字符串。

Date.UTC()函数需要三个单独的参数 - 您只发送一个作为字符串。结果，函数返回NaN（当你遇到问题时，总是检查变量的内容，它几乎总能告诉你你做错了什么）。

您需要将年，月和日作为单独的参数传递。试试这种方式：

Date.UTC(ctime.getFullYear(), (ctime.getMonth() + 1), ctime.getDate())

代替。

小提琴：

http://jsfiddle.net/jlbriggs/2qhmhh1c/

另外 - 为什么要在该日期添加一个月？听起来你正在尝试为当前日期范围绘制数据，但是你将来会改为绘制一个月。

编辑：

从更新的帖子/评论中可以看出，您希望使用plotLine绘制当前日期和时间。在这种情况下，您只需使用Date.now()。

但是，这将使您的数据点中有正确的月份非常重要 - 通过在您的月份中添加1，您将在7月而不是6月进行绘图（在javascript中，月份数字从0开始，所以5是六月，6是七月，等等。）

更新了小提琴：

http://jsfiddle.net/jlbriggs/2qhmhh1c/1/

Highchart如何在highchart中使用自定义javascript变量？

1 个答案: