3

我在带有 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 时区文档。

4

2 回答 2

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/

于 2019-07-29T02:11:54.260 回答
1

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

options: {
  scales: {
    xAxes: [{
      adapters: {
        date: {
          zone: 'America/Denver',
        },
      },
      type: 'time',
      distribution: 'series',
    }],
  },
}
于 2022-02-09T14:49:43.833 回答