我该如何将Luxon时区选项与chart.js相结合？

Question

我在网页上用chart.js显示了一条折线图，但我的时间数据是UTC时间。我想将其转换为丹佛时区以便在图表上显示。Chart.js有一个luxon适配器，但我不知道如何使用它。

我已经包含了以下脚本：

<script src="./chart.js/dist/Chart.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@1.15.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@0.2.0"></script>

我的时间数据格式化为json字符串：

var data = [{"x":"2019-07-23 01:16:11","y":83.97},{"x":"2019-07-23 01:07:13","y":82.74},{"x":"2019-07-23 00:58:21","y":83.86}, ...

这里是我的图表“选项”：

options: {
    scales: {
        xAxes: [{
            type: 'time',
            distribution: 'series',
        }]
    }
}

那么我应该在哪里和如何实现时区定义呢？我还查看了Luxon时区文档。

- Joshua

Answer 1

我花了一些时间尝试让这个功能与最新版本的Chart.js一起使用，解决方案其实很简单 - 现在zone选项需要在options.scales[scaleId].adapters.date下指定，就像这样：

options: {
  scales: {
    xAxes: [{
      adapters: {
        date: {
          zone: 'America/Denver',
        },
      },
      type: 'time',
      distribution: 'series',
    }],
  },
}

- Joshua

---

谢谢。我本来打算更新我的Chart.js版本，包括本地和在线版本，但是我发现我需要重写很多配置，而且也不是那么在意。我会把这个留到以后再处理。 - Joshua

Answer 2

适配器的工作方式似乎是将chart.js选项对象直接传递给Luxon方法。所以你需要这样做：

options: { 
   // other chart.js options here, and then...
   zone: "America/Denver"
}

但这并不能单独解决问题。问题是您没有告诉Luxon您的时间是以UTC表示的，而适配器也没有提供一种可以分别指定要解析的区域和格式化的区域的方法。解决这个问题的简单方法是将字符串更改为带有“Z”结尾的ISO 8601字符串，以告知任何解析它的东西这些字符串应被解释为UTC字符串。然后，Luxon将在UTC中解析它们并使用区域选项将它们格式化为丹佛时间。

因此，2019-07-23 01:07:13 --> 2019-07-23T01:07:13Z

以下是一个示例: https://jsfiddle.net/9f0pu7ac/1/

- snickersnack

---

非常好用。谢谢你。由于我的日期字符串没有存储在ISO 8601格式中，我使用sqlite的“strftime”函数形成了一个ISO 8601日期字符串。在悬停时，查询的字符串显示而不是适应的字符串，但这并不太麻烦，我以后可能会解决它。 - Joshua

这还能用吗？无法让Luxon适配器正常工作。仍然获取本地时间。 - Loupi