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轴刻度是日期的形式。测试代码如下所示：

 

view sourceprint?
001.var usdeur = [                
002.[Date.UTC(2013,4,1),171751],
003.[Date.UTC(2013,4,2),1095],
004.[Date.UTC(2013,4,3),299527],
005.[Date.UTC(2013,4,7),176203.71],
006.[Date.UTC(2013,4,8),452710],
007.[Date.UTC(2013,4,9),58968],
008.[Date.UTC(2013,4,10),432595.95],
009.[Date.UTC(2013,4,11),147793],
010.[Date.UTC(2013,4,12),753902.75],
011.[Date.UTC(2013,4,15),585034.75],
012.[Date.UTC(2013,4,16),416899.42],
013.[Date.UTC(2013,4,17),375393],
014.[Date.UTC(2013,4,18),370498.88],
015.[Date.UTC(2013,4,19),244039.2],
016.[Date.UTC(2013,4,22),318773.8],
017.[Date.UTC(2013,4,23),437405.2],
018.[Date.UTC(2013,4,24),137048.02],
019.[Date.UTC(2013,4,25),280143],
020.[Date.UTC(2013,4,26),484023],
021.[Date.UTC(2013,4,27),304884.81],
022.[Date.UTC(2013,4,28),626961],
023.[Date.UTC(2013,5,2),417514.2],
024.[Date.UTC(2013,5,3),126343.76],
025.[Date.UTC(2013,5,6),382560.07],
026.[Date.UTC(2013,5,7),457586.4],
027.[Date.UTC(2013,5,8),499282.15],
028.[Date.UTC(2013,5,9),250208.8],
029.[Date.UTC(2013,5,10),357181],
030.[Date.UTC(2013,5,13),379097.6],
031.[Date.UTC(2013,5,14),398448.36],
032.[Date.UTC(2013,5,15),571282.76],
033.[Date.UTC(2013,5,16),509547],
034.[Date.UTC(2013,5,17),239403.8],
035.[Date.UTC(2013,5,20),433734],
036.[Date.UTC(2013,5,21),392225.85],
037.[Date.UTC(2013,5,22),175961],
038.[Date.UTC(2013,5,23),319996],
039.[Date.UTC(2013,5,24),479649.44],
040.[Date.UTC(2013,5,27),320121.5],
041.[Date.UTC(2013,5,28),290129],
042.[Date.UTC(2013,5,29),398103.4],
043.[Date.UTC(2013,5,30),295605],
044.[Date.UTC(2013,5,31),194966.56],
045.[Date.UTC(2013,6,3),367821.2],
046.[Date.UTC(2013,6,4),328050.2],
047.[Date.UTC(2013,6,5),300933],
048.[Date.UTC(2013,6,6),917412.9],
049.[Date.UTC(2013,6,7),346019.6],
050.[Date.UTC(2013,6,9),2455],
051.[Date.UTC(2013,6,13),222520],
052.[Date.UTC(2013,6,14),283996.76],
053.[Date.UTC(2013,6,17),394452],
054.[Date.UTC(2013,6,18),695467],
055.[Date.UTC(2013,6,19),512583],
056.[Date.UTC(2013,6,20),517079.52],
057.[Date.UTC(2013,6,21),790425.28],
058.[Date.UTC(2013,6,24),517329.36],
059.[Date.UTC(2013,6,25),307808],
060.[Date.UTC(2013,6,26),777136],
061.[Date.UTC(2013,6,27),496182],
062.[Date.UTC(2013,6,28),621937],
063.[Date.UTC(2013,7,1),202794],
064.[Date.UTC(2013,7,2),1246301.24],
065.[Date.UTC(2013,7,3),279139],
066.[Date.UTC(2013,7,4),270540.95],
067.[Date.UTC(2013,7,5),501088.84],
068.[Date.UTC(2013,7,8),347051.08],
069.[Date.UTC(2013,7,9),354811],
070.[Date.UTC(2013,7,10),393448],
071.[Date.UTC(2013,7,11),387553.2],
072.[Date.UTC(2013,7,12),283752],
073.[Date.UTC(2013,7,15),496380],
074.[Date.UTC(2013,7,16),259586],
075.[Date.UTC(2013,7,17),370993],
076.[Date.UTC(2013,7,18),414954.55],
077.[Date.UTC(2013,7,19),723888],
078.[Date.UTC(2013,7,22),917163.6],
079.[Date.UTC(2013,7,23),390860],
080.[Date.UTC(2013,7,24),469032],
081.[Date.UTC(2013,7,25),407134],
082.[Date.UTC(2013,7,26),344510],
083.[Date.UTC(2013,7,29),212748],
084.[Date.UTC(2013,7,30),512547],
085.[Date.UTC(2013,7,31),248195],
086.[Date.UTC(2013,8,1),314898],
087.[Date.UTC(2013,8,2),516831.84],
088.[Date.UTC(2013,8,5),279809],
089.[Date.UTC(2013,8,6),419616],
090.[Date.UTC(2013,8,7),610014.73],
091.[Date.UTC(2013,8,8),876594.5],
092.[Date.UTC(2013,8,9),246319],
093.[Date.UTC(2013,8,12),260050.92],
094.[Date.UTC(2013,8,13),222391.55],
095.[Date.UTC(2013,8,14),267583.2],
096.[Date.UTC(2013,8,15),369635.08],
097.[Date.UTC(2013,8,16),134690.1],
098.[Date.UTC(2013,8,19),296916.99],
099.[Date.UTC(2013,8,20),278827],
100.[Date.UTC(2013,8,21),315694.4],
101.[Date.UTC(2013,8,22),230281.05],
102.[Date.UTC(2013,8,23),373324],
103.[Date.UTC(2013,8,26),293052.1],
104.[Date.UTC(2013,8,27),386900.7],
105.[Date.UTC(2013,8,28),293080.65],
106.[Date.UTC(2013,8,29),175936.25],
107.[Date.UTC(2013,8,30),218808],
108.[Date.UTC(2013,9,2),402275.4],
109.[Date.UTC(2013,9,3),317585.99],
110.[Date.UTC(2013,9,4),283644],
111.[Date.UTC(2013,9,5),364743.9],
112.[Date.UTC(2013,9,6),405310],
113.[Date.UTC(2013,9,9),688051],
114.[Date.UTC(2013,9,10),460117],
115.[Date.UTC(2013,9,11),429969.7],
116.[Date.UTC(2013,9,12),222008],
117.[Date.UTC(2013,9,13),213748],
118.[Date.UTC(2013,9,16),311693.36],
119.[Date.UTC(2013,9,17),344795.4],
120.[Date.UTC(2013,9,18),156482],
121.[Date.UTC(2013,9,22),192019],
122.[Date.UTC(2013,9,23),367977],
123.[Date.UTC(2013,9,24),294890],
124.[Date.UTC(2013,9,25),278117.95],
125.[Date.UTC(2013,9,26),192921],
126.[Date.UTC(2013,9,27),360651],
127.[Date.UTC(2013,9,29),358194],
128.[Date.UTC(2013,9,30),46088.7],
129.[Date.UTC(2013,10,8),328363],
130.[Date.UTC(2013,10,9),354504],
131.[Date.UTC(2013,10,10),391422],
132.[Date.UTC(2013,10,11),97311],
133.[Date.UTC(2013,10,12),124196],
134.[Date.UTC(2013,10,14),97194],
135.[Date.UTC(2013,10,15),117790],
136.[Date.UTC(2013,10,16),93735],
137.[Date.UTC(2013,10,17),81711.84],
138.[Date.UTC(2013,10,18),204087],
139.[Date.UTC(2013,10,21),277634],
140.[Date.UTC(2013,10,22),103787.9],
141.[Date.UTC(2013,10,23),123122],
142.[Date.UTC(2013,10,24),230315.1],
143.[Date.UTC(2013,10,25),109439],
144.[Date.UTC(2013,10,28),115222],
145.[Date.UTC(2013,10,29),134549],
146.[Date.UTC(2013,10,30),83890],
147.[Date.UTC(2013,10,31),197145],
148.[Date.UTC(2013,11,1),175416],
149.[Date.UTC(2013,11,4),55396],
150.[Date.UTC(2013,11,5),84435],
151.[Date.UTC(2013,11,6),159597],
152.[Date.UTC(2013,11,7),89018.82],
153.[Date.UTC(2013,11,8),75194],
154.[Date.UTC(2013,11,11),62145],
155.[Date.UTC(2013,11,12),56313],
156.[Date.UTC(2013,11,13),98183],
157.[Date.UTC(2013,11,14),96870],
158.[Date.UTC(2013,11,15),97035],
159.[Date.UTC(2013,11,18),83009],
160.[Date.UTC(2013,11,19),88357],
161.[Date.UTC(2013,11,20),68065],
162.[Date.UTC(2013,11,21),31935],
163.[Date.UTC(2013,11,22),43448],
164.[Date.UTC(2013,11,25),44794],
165.[Date.UTC(2013,11,26),95607],
166.[Date.UTC(2013,11,27),161309],
167.[Date.UTC(2013,11,28),90949],
168.[Date.UTC(2013,11,29),16812],
169.[Date.UTC(2013,12,2),81400],
170.[Date.UTC(2013,12,3),73698],
171.[Date.UTC(2013,12,4),77616],
172.[Date.UTC(2013,12,5),133326],
173.[Date.UTC(2013,12,6),47118],
174.[Date.UTC(2013,12,9),26741],
175.[Date.UTC(2013,12,10),81742],
176.[Date.UTC(2013,12,11),13364],
177.[Date.UTC(2013,12,12),70198],
178.[Date.UTC(2013,12,13),19404],
179.[Date.UTC(2013,12,16),49768],
180.[Date.UTC(2013,12,17),110617],
181.[Date.UTC(2013,12,18),110500],
182.[Date.UTC(2013,12,19),412158],
183.[Date.UTC(2013,12,20),197933],
184.[Date.UTC(2013,12,23),77882],
185.[Date.UTC(2013,12,24),64819],
186.[Date.UTC(2013,12,25),93156],
187.[Date.UTC(2013,12,26),43736],
188.[Date.UTC(2013,12,27),90385],
189.[Date.UTC(2013,12,30),143547],
190.[Date.UTC(2013,12,31),66848],
191.[Date.UTC(2014,1,2),35547],
192.[Date.UTC(2014,1,3),270247],
193.[Date.UTC(2014,1,6),196095],
194.[Date.UTC(2014,1,7),283091],
195.[Date.UTC(2014,1,8),728825],
196.[Date.UTC(2014,1,9),319186],
197.[Date.UTC(2014,1,10),2032],
198.[Date.UTC(2014,1,13),13861],
199.[Date.UTC(2014,1,14),240],
200.[Date.UTC(2014,1,15),1410],
201.[Date.UTC(2014,1,16),10973],
202.[Date.UTC(2014,1,17),31345],
203.[Date.UTC(2014,1,18),137829],
204.[Date.UTC(2014,1,19),322688],
205.[Date.UTC(2014,1,20),219287],
206.[Date.UTC(2014,1,21),575061],
207.[Date.UTC(2014,1,22),864469],
208.[Date.UTC(2014,1,23),296883],
209.[Date.UTC(2014,1,24),146845],
210.[Date.UTC(2014,1,26),318453],
211.[Date.UTC(2014,1,27),242811],
212.[Date.UTC(2014,1,28),61278],
213.[Date.UTC(2014,1,29),17305],
214.[Date.UTC(2014,2,7),62778],
215.[Date.UTC(2014,2,8),13468],
216.[Date.UTC(2014,2,10),60181],
217.[Date.UTC(2014,2,11),135495],
218.[Date.UTC(2014,2,12),108467],
219.[Date.UTC(2014,2,13),300270],
220.[Date.UTC(2014,2,14),136452],
221.[Date.UTC(2014,2,17),167040],
222.[Date.UTC(2014,2,18),236010],
223.[Date.UTC(2014,2,19),261885],
224.[Date.UTC(2014,2,20),184969],
225.[Date.UTC(2014,2,21),170984],
226.[Date.UTC(2014,2,24),289979],
227.[Date.UTC(2014,2,25),342240],
228.[Date.UTC(2014,2,26),264457],
229.[Date.UTC(2014,2,27),385554],
230.[Date.UTC(2014,2,28),201720]];
231. 
232.$(function() {
233.//$.getJSON(null, function(result) {
234.Highcharts.setOptions({
235.global:{
236.useUTC:true
237.},
238.lang:{
239.rangeSelectorFrom:'统计日期',
240.rangeSelectorTo:'至',
241.rangeSelectorZoom:'范围',
242.weekdays:["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
243.shortMonths:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
244.}
245.});
246.// Create the chart
247.$('#container').highcharts('StockChart', {
248. 
249.rangeSelector : {
250.selected : 4,
251.inputBoxWidth:90,
252.inputDateFormat:'%Y-%m-%d',
253.buttons: [{
254.type: 'month',
255.count: 1,
256.text: '1月'
257.}, {
258.type: 'month',
259.count: 3,
260.text: '3月'
261.}, {
262.type: 'month',
263.count: 6,
264.text: '6月'
265.}, {
266.type: 'year',
267.count: 1,
268.text: '1年'
269.}, {
270.type: 'all',
271.text: '全部'
272.}]
273.},
274.title : {
275.text : '近一年日订购金额走势图',
276.style:{
277.color: 'black',
278.fontSize: '22px',
279.fontWeight:'900'
280.}
281.},
282.credits:{
283.enabled: false,
284.href: "http://www.dmcc.gov.cn/",
285.text: '数字电影节目中心'
286.},
287.exporting:{
288.// 是否允许导出
289.enabled:true,
290.// 按钮配置
291.buttons:{
292.contextButton:{
293.enabled:false
294.},
295.// 导出按钮配置
296.exportButton:{
297.//menuItems: null,
298.onclick: function() {
299.this.exportChart();
300.},
301.text:'B导出(PDF)'
302.},
303.// 打印按钮配置
304.printButton:{
305.//enabled:true,
306.onclick: function() {
307.this.print();
308.},
309.text:'A打印报表'
310.}
311.},
312.// 文件名
313.filename: encodeURI("订购金额走势图"),
314.// 导出文件默认类型
315.type:'application/pdf'
316.},
317.xAxis: {
318.tickPixelInterval: 140,//x轴上的间隔 
319.dateTimeLabelFormats:{
320.second:'%Y-%m-%d',
321.minute:'%Y-%m-%d',
322.hour:'%Y-%m-%d',
323.day:'%Y-%m-%d',
324.week:'%Y-%m-%d',
325.month:'%Y-%m',
326.year:'%Y'
327.},
328.title :{ 
329.text:null,
330.align:'middle' 
331.}, 
332.type: 'datetime', //定义x轴上日期的显示格式 
333.labels: { 
334./*formatter: function() { 
335.var vDate=new Date(this.value); 
336.return vDate.getFullYear()+"-"+(vDate.getMonth()+1)+"-"+vDate.getDate();
337.},*/
338.//rotation:-45//日期倾斜角度
339.}
340.},/*
341.navigator:{
342.enabled:true,
343.xAxis: {
344.tickWidth: 1,
345.lineWidth: 1,
346.gridLineWidth: 0,
347.tickPixelInterval: 140,
348.labels: {
349.align: 'center',
350.x: 3,
351.y: -4
352.}
353.}
354.},  */
355.yAxis : {   
356.min:0,
357.offset:40,
358.tickPixelInterval: 40,
359.labels:{
360.// 标签位置
361.align: 'left',
362.// 标签格式化
363.formatter: function(){
364.return '￥'+this.value;
365.}
366.}
367.},
368.tooltip: {
369.xDateFormat:'%Y-%m-%d %A'//,
370./*formatter:function (){
371.var vDate=new Date(this.x);
372.return vDate.getFullYear()+"-"+(vDate.getMonth())+"-"+vDate.getDate();
373.}*/
374.},
375.series : [{
376.name : '订购金额',
377.data : usdeur,
378.tooltip: {
379.valueDecimals: 2//保留2位小数位
380.//format:this.value
381.}
382.}]
383.});
384.//});
385. 
386.});


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

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

 

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


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

解决办法：

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

 

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

posted @ 2015-03-05 14:15  亲亲小强  阅读(2872)  评论(0)  编辑  收藏  举报