[摘要]： 今天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軸刻度是日期的形式。測試代碼如下所示：
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內通用的一個返回協調通用時間的。我們很有必要來看看其參數傳遞情況以及要求：
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