Highcharts中UTC使用的注意点

[摘要]：今天Highcharts群（63112678）爱好者内有一位朋友在使用highstock做了一个订购金额走势图，X轴刻度是日期的形式。测试代码如下所示： var usdeur = [ [Date.UTC(2013,4,1),171751], [Date.UTC(2013,4,2),1095], [Date.UTC(2013,4,3),299527], [Date.UTC(2013,4,7),176203.71], [Date.UTC(2013,4,8),452710], [Date.UTC(2013,4...

今天Highcharts群（63112678）爱好者内有一位朋友在使用highstock做了一个订购金额走势图，X轴刻度是日期的形式。测试代码如下所示：

var usdeur = [                 
[Date.UTC(2013,4,1),171751],
[Date.UTC(2013,4,2),1095],
[Date.UTC(2013,4,3),299527],
[Date.UTC(2013,4,7),176203.71],
[Date.UTC(2013,4,8),452710],
[Date.UTC(2013,4,9),58968],
[Date.UTC(2013,4,10),432595.95],
[Date.UTC(2013,4,11),147793],
[Date.UTC(2013,4,12),753902.75],
[Date.UTC(2013,4,15),585034.75],
[Date.UTC(2013,4,16),416899.42],
[Date.UTC(2013,4,17),375393],
[Date.UTC(2013,4,18),370498.88],
[Date.UTC(2013,4,19),244039.2],
[Date.UTC(2013,4,22),318773.8],
[Date.UTC(2013,4,23),437405.2],
[Date.UTC(2013,4,24),137048.02],
[Date.UTC(2013,4,25),280143],
[Date.UTC(2013,4,26),484023],
[Date.UTC(2013,4,27),304884.81],
[Date.UTC(2013,4,28),626961],
[Date.UTC(2013,5,2),417514.2],
[Date.UTC(2013,5,3),126343.76],
[Date.UTC(2013,5,6),382560.07],
[Date.UTC(2013,5,7),457586.4],
[Date.UTC(2013,5,8),499282.15],
[Date.UTC(2013,5,9),250208.8],
[Date.UTC(2013,5,10),357181],
[Date.UTC(2013,5,13),379097.6],
[Date.UTC(2013,5,14),398448.36],
[Date.UTC(2013,5,15),571282.76],
[Date.UTC(2013,5,16),509547],
[Date.UTC(2013,5,17),239403.8],
[Date.UTC(2013,5,20),433734],
[Date.UTC(2013,5,21),392225.85],
[Date.UTC(2013,5,22),175961],
[Date.UTC(2013,5,23),319996],
[Date.UTC(2013,5,24),479649.44],
[Date.UTC(2013,5,27),320121.5],
[Date.UTC(2013,5,28),290129],
[Date.UTC(2013,5,29),398103.4],
[Date.UTC(2013,5,30),295605],
[Date.UTC(2013,5,31),194966.56],
[Date.UTC(2013,6,3),367821.2],
[Date.UTC(2013,6,4),328050.2],
[Date.UTC(2013,6,5),300933],
[Date.UTC(2013,6,6),917412.9],
[Date.UTC(2013,6,7),346019.6],
[Date.UTC(2013,6,9),2455],
[Date.UTC(2013,6,13),222520],
[Date.UTC(2013,6,14),283996.76],
[Date.UTC(2013,6,17),394452],
[Date.UTC(2013,6,18),695467],
[Date.UTC(2013,6,19),512583],
[Date.UTC(2013,6,20),517079.52],
[Date.UTC(2013,6,21),790425.28],
[Date.UTC(2013,6,24),517329.36],
[Date.UTC(2013,6,25),307808],
[Date.UTC(2013,6,26),777136],
[Date.UTC(2013,6,27),496182],
[Date.UTC(2013,6,28),621937],
[Date.UTC(2013,7,1),202794],
[Date.UTC(2013,7,2),1246301.24],
[Date.UTC(2013,7,3),279139],
[Date.UTC(2013,7,4),270540.95],
[Date.UTC(2013,7,5),501088.84],
[Date.UTC(2013,7,8),347051.08],
[Date.UTC(2013,7,9),354811],
[Date.UTC(2013,7,10),393448],
[Date.UTC(2013,7,11),387553.2],
[Date.UTC(2013,7,12),283752],
[Date.UTC(2013,7,15),496380],
[Date.UTC(2013,7,16),259586],
[Date.UTC(2013,7,17),370993],
[Date.UTC(2013,7,18),414954.55],
[Date.UTC(2013,7,19),723888],
[Date.UTC(2013,7,22),917163.6],
[Date.UTC(2013,7,23),390860],
[Date.UTC(2013,7,24),469032],
[Date.UTC(2013,7,25),407134],
[Date.UTC(2013,7,26),344510],
[Date.UTC(2013,7,29),212748],
[Date.UTC(2013,7,30),512547],
[Date.UTC(2013,7,31),248195],
[Date.UTC(2013,8,1),314898],
[Date.UTC(2013,8,2),516831.84],
[Date.UTC(2013,8,5),279809],
[Date.UTC(2013,8,6),419616],
[Date.UTC(2013,8,7),610014.73],
[Date.UTC(2013,8,8),876594.5],
[Date.UTC(2013,8,9),246319],
[Date.UTC(2013,8,12),260050.92],
[Date.UTC(2013,8,13),222391.55],
[Date.UTC(2013,8,14),267583.2],
[Date.UTC(2013,8,15),369635.08],
[Date.UTC(2013,8,16),134690.1],
[Date.UTC(2013,8,19),296916.99],
[Date.UTC(2013,8,20),278827],
[Date.UTC(2013,8,21),315694.4],
[Date.UTC(2013,8,22),230281.05],
[Date.UTC(2013,8,23),373324],
[Date.UTC(2013,8,26),293052.1],
[Date.UTC(2013,8,27),386900.7],
[Date.UTC(2013,8,28),293080.65],
[Date.UTC(2013,8,29),175936.25],
[Date.UTC(2013,8,30),218808],
[Date.UTC(2013,9,2),402275.4],
[Date.UTC(2013,9,3),317585.99],
[Date.UTC(2013,9,4),283644],
[Date.UTC(2013,9,5),364743.9],
[Date.UTC(2013,9,6),405310],
[Date.UTC(2013,9,9),688051],
[Date.UTC(2013,9,10),460117],
[Date.UTC(2013,9,11),429969.7],
[Date.UTC(2013,9,12),222008],
[Date.UTC(2013,9,13),213748],
[Date.UTC(2013,9,16),311693.36],
[Date.UTC(2013,9,17),344795.4],
[Date.UTC(2013,9,18),156482],
[Date.UTC(2013,9,22),192019],
[Date.UTC(2013,9,23),367977],
[Date.UTC(2013,9,24),294890],
[Date.UTC(2013,9,25),278117.95],
[Date.UTC(2013,9,26),192921],
[Date.UTC(2013,9,27),360651],
[Date.UTC(2013,9,29),358194],
[Date.UTC(2013,9,30),46088.7],
[Date.UTC(2013,10,8),328363],
[Date.UTC(2013,10,9),354504],
[Date.UTC(2013,10,10),391422],
[Date.UTC(2013,10,11),97311],
[Date.UTC(2013,10,12),124196],
[Date.UTC(2013,10,14),97194],
[Date.UTC(2013,10,15),117790],
[Date.UTC(2013,10,16),93735],
[Date.UTC(2013,10,17),81711.84],
[Date.UTC(2013,10,18),204087],
[Date.UTC(2013,10,21),277634],
[Date.UTC(2013,10,22),103787.9],
[Date.UTC(2013,10,23),123122],
[Date.UTC(2013,10,24),230315.1],
[Date.UTC(2013,10,25),109439],
[Date.UTC(2013,10,28),115222],
[Date.UTC(2013,10,29),134549],
[Date.UTC(2013,10,30),83890],
[Date.UTC(2013,10,31),197145],
[Date.UTC(2013,11,1),175416],
[Date.UTC(2013,11,4),55396],
[Date.UTC(2013,11,5),84435],
[Date.UTC(2013,11,6),159597],
[Date.UTC(2013,11,7),89018.82],
[Date.UTC(2013,11,8),75194],
[Date.UTC(2013,11,11),62145],
[Date.UTC(2013,11,12),56313],
[Date.UTC(2013,11,13),98183],
[Date.UTC(2013,11,14),96870],
[Date.UTC(2013,11,15),97035],
[Date.UTC(2013,11,18),83009],
[Date.UTC(2013,11,19),88357],
[Date.UTC(2013,11,20),68065],
[Date.UTC(2013,11,21),31935],
[Date.UTC(2013,11,22),43448],
[Date.UTC(2013,11,25),44794],
[Date.UTC(2013,11,26),95607],
[Date.UTC(2013,11,27),161309],
[Date.UTC(2013,11,28),90949],
[Date.UTC(2013,11,29),16812],
[Date.UTC(2013,12,2),81400],
[Date.UTC(2013,12,3),73698],
[Date.UTC(2013,12,4),77616],
[Date.UTC(2013,12,5),133326],
[Date.UTC(2013,12,6),47118],
[Date.UTC(2013,12,9),26741],
[Date.UTC(2013,12,10),81742],
[Date.UTC(2013,12,11),13364],
[Date.UTC(2013,12,12),70198],
[Date.UTC(2013,12,13),19404],
[Date.UTC(2013,12,16),49768],
[Date.UTC(2013,12,17),110617],
[Date.UTC(2013,12,18),110500],
[Date.UTC(2013,12,19),412158],
[Date.UTC(2013,12,20),197933],
[Date.UTC(2013,12,23),77882],
[Date.UTC(2013,12,24),64819],
[Date.UTC(2013,12,25),93156],
[Date.UTC(2013,12,26),43736],
[Date.UTC(2013,12,27),90385],
[Date.UTC(2013,12,30),143547],
[Date.UTC(2013,12,31),66848],
[Date.UTC(2014,1,2),35547],
[Date.UTC(2014,1,3),270247],
[Date.UTC(2014,1,6),196095],
[Date.UTC(2014,1,7),283091],
[Date.UTC(2014,1,8),728825],
[Date.UTC(2014,1,9),319186],
[Date.UTC(2014,1,10),2032],
[Date.UTC(2014,1,13),13861],
[Date.UTC(2014,1,14),240],
[Date.UTC(2014,1,15),1410],
[Date.UTC(2014,1,16),10973],
[Date.UTC(2014,1,17),31345],
[Date.UTC(2014,1,18),137829],
[Date.UTC(2014,1,19),322688],
[Date.UTC(2014,1,20),219287],
[Date.UTC(2014,1,21),575061],
[Date.UTC(2014,1,22),864469],
[Date.UTC(2014,1,23),296883],
[Date.UTC(2014,1,24),146845],
[Date.UTC(2014,1,26),318453],
[Date.UTC(2014,1,27),242811],
[Date.UTC(2014,1,28),61278],
[Date.UTC(2014,1,29),17305],
[Date.UTC(2014,2,7),62778],
[Date.UTC(2014,2,8),13468],
[Date.UTC(2014,2,10),60181],
[Date.UTC(2014,2,11),135495],
[Date.UTC(2014,2,12),108467],
[Date.UTC(2014,2,13),300270],
[Date.UTC(2014,2,14),136452],
[Date.UTC(2014,2,17),167040],
[Date.UTC(2014,2,18),236010],
[Date.UTC(2014,2,19),261885],
[Date.UTC(2014,2,20),184969],
[Date.UTC(2014,2,21),170984],
[Date.UTC(2014,2,24),289979],
[Date.UTC(2014,2,25),342240],
[Date.UTC(2014,2,26),264457],
[Date.UTC(2014,2,27),385554],
[Date.UTC(2014,2,28),201720]]; 
 
$(function() {
//$.getJSON(null, function(result) {
Highcharts.setOptions({
global:{
useUTC:true
},
lang:{
rangeSelectorFrom:'统计日期',
rangeSelectorTo:'至',
rangeSelectorZoom:'范围',
weekdays:["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
shortMonths:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
}
});
// Create the chart
$('#container').highcharts('StockChart', {
 
rangeSelector : {
selected : 4,
inputBoxWidth:90,
inputDateFormat:'%Y-%m-%d',
buttons: [{
type: 'month',
count: 1,
text: '1月'
}, {
type: 'month',
count: 3,
text: '3月'
}, {
type: 'month',
count: 6,
text: '6月'
}, {
type: 'year',
count: 1,
text: '1年'
}, {
type: 'all',
text: '全部'
}]
},
title : {
text : '近一年日订购金额走势图',
style:{
color: 'black',
fontSize: '22px',
fontWeight:'900'
}
},
credits:{
enabled: false,
href: "http://www.dmcc.gov.cn/",
text: '数字电影节目中心'
},
exporting:{
// 是否允许导出
enabled:true,
// 按钮配置
buttons:{
contextButton:{
enabled:false
},
// 导出按钮配置
exportButton:{
//menuItems: null,
onclick: function() {
this.exportChart();
},
text:'B导出(PDF)'
},
// 打印按钮配置
printButton:{
//enabled:true,
onclick: function() {
this.print();
},
text:'A打印报表'
}
},
// 文件名
filename: encodeURI("订购金额走势图"),
// 导出文件默认类型
type:'application/pdf'
},
xAxis: {
tickPixelInterval: 140,//x轴上的间隔  
dateTimeLabelFormats:{
second:'%Y-%m-%d',
minute:'%Y-%m-%d',
hour:'%Y-%m-%d',
day:'%Y-%m-%d',
week:'%Y-%m-%d',
month:'%Y-%m',
year:'%Y'
},
title :{  
text:null,
align:'middle' 
},  
type: 'datetime', //定义x轴上日期的显示格式  
labels: {  
/*formatter: function() {  
var vDate=new Date(this.value);  
return vDate.getFullYear()+"-"+(vDate.getMonth()+1)+"-"+vDate.getDate(); 
},*/
//rotation:-45//日期倾斜角度
}
},/*
navigator:{
enabled:true,
xAxis: {
tickWidth: 1,
lineWidth: 1,
gridLineWidth: 0,
tickPixelInterval: 140,
labels: {
align: 'center',
x: 3,
y: -4
}
}
},  */
yAxis : {    
min:0,
offset:40,
tickPixelInterval: 40,
labels:{
// 标签位置
align: 'left',
// 标签格式化
formatter: function(){
return '￥'+this.value;
}
}
},
tooltip: {
xDateFormat:'%Y-%m-%d %A'//,
/*formatter:function (){
var vDate=new Date(this.x);
return vDate.getFullYear()+"-"+(vDate.getMonth())+"-"+vDate.getDate();
}*/
},
series : [{
name : '订购金额',
data : usdeur,
tooltip: {
valueDecimals: 2//保留2位小数位
//format:this.value
}
}]
});
//});
 
});

根据series内传递的data来看起始日期应该是2013-04-01,结果X轴显示的数据以及数据点的tooltip内的提示信息都是2013-05-01，整体都往后推移了一个月的情况。

通过分析得知出现这一现象的原因是因为我们的sereis内的data采用了Date.UTC(year,monty,day)的形式，Date.UTC函数是一个JavaScript内通用的一个返回协调通用时间的。我们很有必要来看看其参数传递情况以及要求：

year
必需。 为了确保跨世纪日期的精确性，需要指定完整的年份。 如果 year 处于 0 到 99 之间，则 year 就被假定为 1900 + year。
month
必需。 月份，用从 0 到 11 的整数表示（1 月至 12 月）。
day
必需。 日期，用从 1 到 31 的整数表示。
hours
可选。 如果提供了 minutes，则必须提供此参数。 一个指定小时的，从 0 到 23 的整数（午夜到 11pm）。
minutes
可选。 如果提供了 seconds，则必须提供此参数。 一个指定分钟的，从 0 到 59 的整数。
seconds
可选。 如果提供了 milliseconds，则必须提供此参数。 一个指定秒的，从 0 到 59 的整数。
ms
可选。 一个指定毫秒的，从 0 到 999 的整数。

通过上述的参数说明，我们就不难明白为何我们的月份统一往后错位了一个月，我们传入的月份4，其实代表的是5月份。

解决办法：

我们在拼接或者提供sereis内数据的时候，只要采用的是Date.UTC的形式，必须将月份减掉1再传入，否则会有时间错位问题，切记！！！

原文：http://www.stepday.com/topic/?838