如何将 Luxon 时区选项与 chart.js 合并?
How do I incorporate Luxon timezone options with chart.js?
我在 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":
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'series',
}]
}
}
那么在哪里以及如何实现时区定义?
我也看过 Luxon timezone documentation.
适配器的工作方式似乎是它只是将 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/
我花了一段时间试图让它与更新版本的 Chart.js 一起使用,结果证明解决方案非常简单——zone
选项现在需要在 options.scales[scaleId].adapters.date
,像这样:
options: {
scales: {
xAxes: [{
adapters: {
date: {
zone: 'America/Denver',
},
},
type: 'time',
distribution: 'series',
}],
},
}
我在 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":
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'series',
}]
}
}
那么在哪里以及如何实现时区定义? 我也看过 Luxon timezone documentation.
适配器的工作方式似乎是它只是将 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/
我花了一段时间试图让它与更新版本的 Chart.js 一起使用,结果证明解决方案非常简单——zone
选项现在需要在 options.scales[scaleId].adapters.date
,像这样:
options: {
scales: {
xAxes: [{
adapters: {
date: {
zone: 'America/Denver',
},
},
type: 'time',
distribution: 'series',
}],
},
}