如何为轻量级图表设置自定义时区？

Question

我有一个轻量级的图表设置，如下所示。我想添加某种配置，以便图表可以显示本地时间，而不是 Unix 时间戳传递的通用时间，例如，它与我的时间戳有几个小时的偏移。另一种可能性是修改 Unix 时间戳。

var chart = LightweightCharts.createChart(document.getElementById("charts"), {
  width: 1060,
  height: 537,
  layout: {
    backgroundColor: "#161616",
    textColor: "rgba(255, 255, 255, 0.9)",
    fontSize: 15,
    fontFamily: "Ubuntu",
  },
  grid: {
    vertLines: {
      color: "#424242",
      width: 0.3,
    },
    horzLines: {
      color: "#424242",
      width: 0.3,
    },
  },
  crosshair: {
    mode: LightweightCharts.CrosshairMode.Normal,
  },
  priceScale: {
    borderColor: "rgba(197, 203, 206, 0.8)",
    size: 5,
  },
  timeScale: {
    borderColor: "rgba(197, 203, 206, 0.8)",
    timeVisible: true,
    secondsVisible: false,
    rightBarStaysOnScroll: true,
  },
});

Answer 1

我已经发布了类似的问题here，但到目前为止还没有发布答案。

我看到两种方法可以帮助您解决这个问题：

1. 您可以通过将 TZ 偏移量添加到时间来修改柱的源时间（我认为这是首选方式 - 见下文）
2. 您可以覆盖

   tickMarkFormatter

   、

   dateFormat

   和

   timeFormatter

   ，以使用所需的 TZ 偏移量正确格式化日期。

我认为第一种方法（添加偏移量）是首选，因为它也会影响刻度线的生成及其权重，因此您的时间刻度看起来会更好，没有问题（例如，您可以看到时间的

23:00

而不是

30 

表示天，因为您添加了 60 分钟的偏移量，它会稍微改变时间刻度）。

编辑（2021 年 11 月 3 日）： 请此文档 获取有关如何支持时区的更多信息。

Answer 2

还有另一种方法。

轻量级图表将unix时间戳视为GMT时间。

示例： 要按照 IST (GMT+5:30) 显示时间，只需将该秒数添加到当前时间即可。 （19800 秒）

Answer 3

我希望他们能尽快解决这个问题，同时如果你不想扭曲原始数据，请使用以下格式化程序：

const localTimezoneOffset = new Date().getTimezoneOffset() * 60

....

  timeScale: {
    timeVisible: true,
    tickMarkFormatter: (time, tickMarkType, locale) => {
      return defaultTickMarkFormatter({timestamp: time - localTimezoneOffset},
        tickMarkType, locale)
    },
  },

其中

defaultTickMarkFormatter

是他们的默认格式化程序：

function defaultTickMarkFormatter(timePoint, tickMarkType, locale) {
  const formatOptions = {};

  switch (tickMarkType) {
    case 0: //TickMarkType.Year:
      formatOptions.year = 'numeric';
      break;

    case 1: // TickMarkType.Month:
      formatOptions.month = 'short';
      break;

    case 2: //TickMarkType.DayOfMonth:
      formatOptions.day = 'numeric';
      break;

    case 3: //TickMarkType.Time:
      formatOptions.hour12 = false;
      formatOptions.hour = '2-digit';
      formatOptions.minute = '2-digit';
      break;

    case 4: //TickMarkType.TimeWithSeconds:
      formatOptions.hour12 = false;
      formatOptions.hour = '2-digit';
      formatOptions.minute = '2-digit';
      formatOptions.second = '2-digit';
      break;

    default:
      ensureNever(tickMarkType);
  }

  const date = timePoint.businessDay === undefined
    ? new Date(timePoint.timestamp * 1000)
    : new Date(Date.UTC(timePoint.businessDay.year, timePoint.businessDay.month - 1, timePoint.businessDay.day));

  // from given date we should use only as UTC date or timestamp
  // but to format as locale date we can convert UTC date to local date
  const localDateFromUtc = new Date(
    date.getUTCFullYear(),
    date.getUTCMonth(),
    date.getUTCDate(),
    date.getUTCHours(),
    date.getUTCMinutes(),
    date.getUTCSeconds(),
    date.getUTCMilliseconds()
  );

  return localDateFromUtc.toLocaleString(locale, formatOptions);
}

他们关于时区的文档有很多煽动性的内容（表明有人正在破坏一项简单的任务）。他们可以轻松添加一些属性，例如

convertToLocalTimezone: true

或

timezoneOffset: 7200

，但他们似乎存在内部争议并决定不采取任何行动。 ☹️