我需要使用Highcharts绘制一系列数据点(UTC日期和值),默认情况下使用UTC。但是,数据可以位于不同的用户时区,因此在此示例中,我将其设置为New York。我注意到,即使我每个数据点上的工具提示都是正确的,例如10/26的那些,其中一些似乎是在对应于10/27的部分中绘制的。我希望10/26的所有9个数据点都在10/17标记之前绘制。有人在我的代码中看到此问题吗?我创建了一个JSFIFFLE来清楚地说明问题。
var timeZone = 'America/New_York';
var timeZoneOffsetValue = moment(values[0].data[0][0]).tz("America/New_York")._offset;
console.log(timeZoneOffsetValue);
Highcharts.chart('container', {
yAxis: {
gridLineWidth: 0.5,
gridLineColor: '#D6D6D6',
tickInterval: 5,
dashStyle: 'LongDash',
lineColor: '#D6D6D6'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%m/%d',
week: '%d/%b',
month: '%b/%y',
year: '%Y'
},
title: {
enabled: true,
text: 'date'
},
gridLineWidth: 0,
lineColor: '#D6D6D6',
lineWidth: 0.5,
startOnTick: true
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: this.toolTip
}
},
chart: {
marginTop: 5,
marginRight: 0,
reflow: false,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
style: {
fontFamily: 'Open Sans'
},
type: 'scatter',
spacingBottom: 0,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0
},
tooltip: {
formatter: function () {
var time = new Highcharts.setOptions({
global: {
timezoneOffset: -timeZoneOffsetValue
}
}, this);
var s = '<b>' + Highcharts.dateFormat('%m/%d %H:%M:%S', this.x)
+ ' - ' + Highcharts.numberFormat(this.y, 2);
return s;
},
},
series: values
});
http://jsfiddle.net/thehme/a47Lbnwr/25/
注意:,在我的实际代码中,我注意到有时有时当我第一次加载绘图时,大多数情况下3个数据点位于10/27插槽中,但是如果我重新加载绘制,然后有时数据点移到10/16日期范围。这就是让它变得更加混乱的原因。