我需要让 Dygraph 尊重任意时区。图表中/上/周围显示的所有日期都应该能够显示在任意时区中。
问题:
最佳答案
更新的答案，现在适用于 Dygraph 1.1.1 版。对于旧答案跳过水平规则。
现在有一种更简单的方法可以让 Dygraph 使用任意时区。旧方法(实现自定义 valueFormatter 、 axisLabelFormatter 和 ticker 函数)理论上应该仍然有效，只要函数兼容(旧答案中的代码与 Dygraph v. 1.1.1 不兼容。)
不过，这次我决定走不同的路线。这种新方法不使用记录的选项，所以它有点hacky。但是，它确实具有代码更少的好处(无需重新实现 ticker 函数等)。因此，虽然它有点 hacky，但它是一个优雅的 hack IMO。请注意，新版本仍然需要 moment 和 moment timezone 3rd 方库。
请注意，此版本要求您使用新的 labelsUTC 选项，设置为 true 。您可以将这个 hack 视为将 Dygraph 的 UTC 选项转换为您选择的时区。
var g_timezoneName = 'America/Los_Angeles'; // US Pacific Time
function getMomentTZ(d, interpret) {
// Always setting a timezone seems to prevent issues with daylight savings time boundaries, even when the timezone we are setting is the same as the browser: https://github.com/moment/moment/issues/1709
// The moment tz docs state this:
// moment.tz(..., String) is used to create a moment with a timezone, and moment().tz(String) is used to change the timezone on an existing moment.
// Here is some code demonstrating the difference.
// d = new Date()
// d.getTime() / 1000 // 1448297005.27
// moment(d).tz(tzStringName).toDate().getTime() / 1000 // 1448297005.27
// moment.tz(d, tzStringName).toDate().getTime() / 1000 // 1448300605.27
if (interpret) {
return moment.tz(d, g_timezoneName); // if d is a javascript Date object, the resulting moment may have a *different* epoch than the input Date d.
} else {
return moment(d).tz(g_timezoneName); // does not change epoch value, just outputs same epoch value as different timezone
}
}
/** Elegant hack: overwrite Dygraph's DateAccessorsUTC to return values
* according to the currently selected timezone (which is stored in
* g_timezoneName) instead of UTC.
* This hack has no effect unless the 'labelsUTC' setting is true. See Dygraph
* documentation regarding labelsUTC flag.
*/
Dygraph.DateAccessorsUTC = {
getFullYear: function(d) {return getMomentTZ(d, false).year();},
getMonth: function(d) {return getMomentTZ(d, false).month();},
getDate: function(d) {return getMomentTZ(d, false).date();},
getHours: function(d) {return getMomentTZ(d, false).hour();},
getMinutes: function(d) {return getMomentTZ(d, false).minute();},
getSeconds: function(d) {return getMomentTZ(d, false).second();},
getMilliseconds: function(d) {return getMomentTZ(d, false).millisecond();},
getDay: function(d) {return getMomentTZ(d, false).day();},
makeDate: function(y, m, d, hh, mm, ss, ms) {
return getMomentTZ({
year: y,
month: m,
day: d,
hour: hh,
minute: mm,
second: ss,
millisecond: ms,
}, true).toDate();
},
};
// ok, now be sure to set labelsUTC option to true
var graphoptions = {
labels: ['Time', 'Impressions', 'Clicks'],
labelsUTC: true
};
var g = new Dygraph(chart, data, graphoptions);
valueFormatter 因为我想要“YYYY-MM-DD”格式的标签而不是“YYYY/MM/DD”，但没有必要再指定 valueFormatter 只是为了获得任意时区支持。)使用 Dygraph 1.1.1、Moment 2.10.6 和 Moment Timezone v 0.4.1 进行测试
旧答案，适用于 Dygraph 1.0.1 版。
我的第一次尝试是简单地传递 Dygraph 一些 timezone-js 对象而不是 Date 对象，因为它们声称能够用作 javascript Date 对象的直接替代品(您可以像 Date 对象一样使用它们)。不幸的是，这不起作用，因为 Dygraph 从头开始创建 Date 对象，并且似乎没有使用我传递给它的 timezone-js 对象。
深入研究 Dygraph 文档表明，我们可以使用一些钩子(Hook)来覆盖日期的显示方式:
最后一个实际上也取决于时区，因此我们需要覆盖它以及格式化程序。
所以我首先使用 timezone-js 编写了 valueFormatter 和 axisLabelFormatter 的替代品，但事实证明 timezone-js 对于非 DST 日期(当前处于 DST 中的浏览器)实际上并不能正常工作。所以首先我设置了 moment-js、moment-timezone-js 和我需要的时区数据。 (对于这个例子，我们只需要'Etc/UTC')。请注意，我使用全局变量来存储传递给 moment-timezone-js 的时区。如果你有更好的方法，欢迎评论。以下是我使用 moment-js 编写的 valueFormatter 和 axisLabelFormatters:
var g_timezoneName = 'Etc/UTC'; // UTC
/*
Copied the Dygraph.dateAxisFormatter function and modified it to not create a new Date object, and to use moment-js
*/
function dateAxisFormatter(date, granularity) {
var mmnt = moment(date).tz(g_timezoneName);
if (granularity >= Dygraph.DECADAL) {
return mmnt.format('YYYY');
} else if (granularity >= Dygraph.MONTHLY) {
return mmnt.format('MMM YYYY');
} else {
var frac = mmnt.hour() * 3600 + mmnt.minute() * 60 + mmnt.second() + mmnt.millisecond();
if (frac === 0 || granularity >= Dygraph.DAILY) {
return mmnt.format('DD MMM');
} else {
return hmsString_(mmnt);
}
}
}
/*
Copied the Dygraph.dateString_ function and modified it to use moment-js
*/
function valueFormatter(date_millis) {
var mmnt = moment(date_millis).tz(g_timezoneName);
var frac = mmnt.hour() * 3600 + mmnt.minute() * 60 + mmnt.second();
if (frac) {
return mmnt.format('YYYY-MM-DD') + ' ' + hmsString_(mmnt);
}
return mmnt.format('YYYY-MM-DD');
}
/*
Format hours, mins, seconds, but leave off seconds if they are zero
@param mmnt - moment object
*/
function hmsString_(mmnt) {
if (mmnt.second()) {
return mmnt.format('HH:mm:ss');
} else {
return mmnt.format('HH:mm');
}
}
所以，为了解决这个问题，我们需要提供我们自己的 Ticker。有什么比 Dygraph 的修改版本更好的股票代码？
/** @type {Dygraph.Ticker}
Copied from Dygraph.dateTicker. Using our own function to getAxis, which respects TZ
*/
function customDateTickerTZ(a, b, pixels, opts, dygraph, vals) {
var chosen = Dygraph.pickDateTickGranularity(a, b, pixels, opts);
if (chosen >= 0) {
return getDateAxis(a, b, chosen, opts, dygraph); // use own own function here
} else {
// this can happen if self.width_ is zero.
return [];
}
};
/**
* Copied from Dygraph.getDateAxis - modified to respect TZ
* @param {number} start_time
* @param {number} end_time
* @param {number} granularity (one of the granularities enumerated in Dygraph code)
* @param {function(string):*} opts Function mapping from option name -> value.
* @param {Dygraph=} dg
* @return {!Dygraph.TickList}
*/
function getDateAxis(start_time, end_time, granularity, opts, dg) {
var formatter = /** @type{AxisLabelFormatter} */(
opts("axisLabelFormatter"));
var ticks = [];
var t;
if (granularity < Dygraph.MONTHLY) {
// Generate one tick mark for every fixed interval of time.
var spacing = Dygraph.SHORT_SPACINGS[granularity];
// Find a time less than start_time which occurs on a "nice" time boundary
// for this granularity.
var g = spacing / 1000;
var d = moment(start_time);
d.tz(g_timezoneName); // setting a timezone seems to prevent issues with daylight savings time boundaries, even when the timezone we are setting is the same as the browser: https://github.com/moment/moment/issues/1709
d.millisecond(0);
var x;
if (g <= 60) { // seconds
x = d.second();
d.second(x - x % g);
} else {
d.second(0);
g /= 60;
if (g <= 60) { // minutes
x = d.minute();
d.minute(x - x % g);
} else {
d.minute(0);
g /= 60;
if (g <= 24) { // days
x = d.hour();
d.hour(x - x % g);
} else {
d.hour(0);
g /= 24;
if (g == 7) { // one week
d.startOf('week');
}
}
}
}
start_time = d.valueOf();
// For spacings coarser than two-hourly, we want to ignore daylight
// savings transitions to get consistent ticks. For finer-grained ticks,
// it's essential to show the DST transition in all its messiness.
var start_offset_min = moment(start_time).tz(g_timezoneName).zone();
var check_dst = (spacing >= Dygraph.SHORT_SPACINGS[Dygraph.TWO_HOURLY]);
for (t = start_time; t <= end_time; t += spacing) {
d = moment(t).tz(g_timezoneName);
// This ensures that we stay on the same hourly "rhythm" across
// daylight savings transitions. Without this, the ticks could get off
// by an hour. See tests/daylight-savings.html or issue 147.
if (check_dst && d.zone() != start_offset_min) {
var delta_min = d.zone() - start_offset_min;
t += delta_min * 60 * 1000;
d = moment(t).tz(g_timezoneName);
start_offset_min = d.zone();
// Check whether we've backed into the previous timezone again.
// This can happen during a "spring forward" transition. In this case,
// it's best to skip this tick altogether (we may be shooting for a
// non-existent time like the 2AM that's skipped) and go to the next
// one.
if (moment(t + spacing).tz(g_timezoneName).zone() != start_offset_min) {
t += spacing;
d = moment(t).tz(g_timezoneName);
start_offset_min = d.zone();
}
}
ticks.push({ v:t,
label: formatter(d, granularity, opts, dg)
});
}
} else {
// Display a tick mark on the first of a set of months of each year.
// Years get a tick mark iff y % year_mod == 0. This is useful for
// displaying a tick mark once every 10 years, say, on long time scales.
var months;
var year_mod = 1; // e.g. to only print one point every 10 years.
if (granularity < Dygraph.NUM_GRANULARITIES) {
months = Dygraph.LONG_TICK_PLACEMENTS[granularity].months;
year_mod = Dygraph.LONG_TICK_PLACEMENTS[granularity].year_mod;
} else {
Dygraph.warn("Span of dates is too long");
}
var start_year = moment(start_time).tz(g_timezoneName).year();
var end_year = moment(end_time).tz(g_timezoneName).year();
for (var i = start_year; i <= end_year; i++) {
if (i % year_mod !== 0) continue;
for (var j = 0; j < months.length; j++) {
var dt = moment.tz(new Date(i, months[j], 1), g_timezoneName); // moment.tz(Date, tz_String) is NOT the same as moment(Date).tz(String) !!
dt.year(i);
t = dt.valueOf();
if (t < start_time || t > end_time) continue;
ticks.push({ v:t,
label: formatter(moment(t).tz(g_timezoneName), granularity, opts, dg)
});
}
}
}
return ticks;
};
var graphoptions = {
labels: ['Time', 'Impressions', 'Clicks'],
axes: {
x: {
valueFormatter: valueFormatter,
axisLabelFormatter: dateAxisFormatter,
ticker: customDateTickerTZ
}
}
};
g = new Dygraph(chart, data, graphoptions);
g_timezoneName = "<a new timezone name that you've configured moment-timezone to use>";
g.updateOptions({axes: {x: {valueFormatter: valueFormatter, axisLabelFormatter: dateAxisFormatter, ticker: customDateTickerTZ}}});