码迷，mamicode.com
首页 > 其他好文 > 详细

Highcharts中UTC使用的注意点

时间：2015-03-05 16:29:24      阅读：665      评论：0      收藏：0      [点我收藏+]

标签：

技术分享 [摘要]： 今天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

Highcharts中UTC使用的注意点

标签：

原文地址：http://www.cnblogs.com/qiangupc/p/4315723.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！