javascript - 如何将 Luxon 时区选项与 chart.js 合并？

Question

我在网页上使用 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.

Answer 1

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

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

但这并不能自行解决问题。问题是你没有告诉 Luxon 你的时间是用 UTC 表示的，并且适配器没有给你一种方法来单独指定你想要解析的区域 vs 格式。解决这个问题的简单方法是改变将您的字符串转换为末尾带有“Z”的 ISO 8601 字符串，以告诉任何解析它的字符串，这些字符串将被解释为 UTC 字符串。然后 Luxon 将在 UTC 中解析它们并使用区域选项为丹佛格式化它们。

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

这是一个 fiddle :https://jsfiddle.net/9f0pu7ac/1/