如何将 Luxon 时区选项与 chart.js 结合？答案

【问题标题】：How do I incorporate Luxon timezone options with chart.js?如何将 Luxon 时区选项与 chart.js 结合？
【发布时间】：2019-11-30 23:56:02
【问题描述】：

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

我已包含以下脚本：

<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 timezone documentation.

【问题讨论】：

标签： javascript chart.js luxon

【解决方案1】：

适配器的工作方式似乎是它只是将 chart.js 选项对象传递给 Luxon 方法。所以你会想要这样的东西：

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

但这并不能自行解决。问题是您没有告诉 Luxon 您的时间以 UTC 表示，并且适配器没有为您提供单独指定要解析的区域 vs 格式的方法。解决此问题的简单方法是更改你的字符串到最后带有“Z”的 ISO 8601 字符串告诉任何解析它的字符串应该被解释为 UTC 字符串。然后 Luxon 将在 UTC 中解析它们并使用 zone 选项为丹佛格式化它们。

所以，2019-07-23 01:07:13 --> 2019-07-23T01:07:13Z

这是一个小提琴：https://jsfiddle.net/9f0pu7ac/1/

【讨论】：

效果很好。谢谢你。由于我的日期字符串不是以 ISO 8601 格式存储的，因此我使用 sqlite 的“strftime”函数形成了一个 ISO 8601 日期字符串。悬停时，显示的是查询字符串而不是调整后的字符串，但这并不太麻烦，我可能会稍后解决。
这还能用吗？无法为 luxon 适配器工作。仍在获取当地时间

【解决方案2】：

我花了一段时间试图让它与最新版本的 Chart.js 一起工作，结果证明解决方案非常简单 - 现在需要在 options.scales[scaleId].adapters.date 下指定 zone 选项，如下所示：

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

【讨论】：

谢谢。我打算在本地和在线更新我的 Chart.js 版本，但我发现我必须重写相当多的配置并且我并不在乎。我会把它放在口袋里以备后用。