【发布时间】：2021-09-04 20:24:35
【问题描述】：
起亚啦！我正在尝试实现 Chart.JS 时间笛卡尔轴。我已经阅读了文档，发现我需要从v3.x.x 添加一个日期时间库和适配器，所以我已经这样做了。
出于某种原因，据我所知，我的所有数据点都准时=0。我认为这就像时间值没有被正确解析。
Chart.js 在内部使用自纪元（1970 年 1 月 1 日午夜，UTC）以来定义为毫秒的时间戳。但是，Chart.js 也支持您选择的日期适配器接受的所有格式。如果你想设置 parsing: false 以获得更好的性能，你应该使用时间戳。
因此，我已将我的 API 配置为返回毫秒时间戳，并在 x 轴选项中定义了 parsing:false。
这是一个损坏的 Codepen：https://codepen.io/Finnito/pen/KKqgXez，但代码也附在下面。
document.addEventListener("DOMContentLoaded", function() {
var weeklyHistoryChartEl = document.getElementById('weeklyHistory').getContext('2d');
var weeklyHistoryChart = new Chart(weeklyHistoryChartEl, {
type: 'line',
scales: {
x: {
type: 'time',
parsing: false
}
}
});
weeklyHistoryChart.data = JSON.parse('{"datasets":[{"data":[{"x":1625443200,"y":11.74},{"x":1626048000,"y":12.43},{"x":1626652800,"y":34.18}],"label":"Hike","hidden":true},{"data":[{"x":1624233600,"y":5.27},{"x":1630281600,"y":7.32}],"label":"Kayaking","hidden":true},{"data":[{"x":1626652800,"y":17.99}],"label":"NordicSki","hidden":true},{"data":[{"x":1623024000,"y":9.98},{"x":1623628800,"y":15.97},{"x":1624233600,"y":29.07},{"x":1624838400,"y":57.26},{"x":1625443200,"y":15.87},{"x":1627257600,"y":40.73},{"x":1627862400,"y":29.87},{"x":1628467200,"y":58.87},{"x":1629072000,"y":7.62},{"x":1629676800,"y":21.52},{"x":1630281600,"y":6.03}],"label":"Ride","hidden":true},{"data":[{"x":1628467200,"y":0}],"label":"RockClimbing","hidden":true},{"data":[{"x":1623628800,"y":92.45},{"x":1624233600,"y":31.24},{"x":1624838400,"y":23.81},{"x":1625443200,"y":9.39},{"x":1626048000,"y":40.94},{"x":1626652800,"y":12.84},{"x":1627257600,"y":33.59},{"x":1627862400,"y":30.97},{"x":1628467200,"y":31.88},{"x":1629072000,"y":27.88},{"x":1629676800,"y":47.23},{"x":1630281600,"y":48.1}],"label":"Run","hidden":false},{"data":[{"x":1627862400,"y":30.2},{"x":1628467200,"y":36.24},{"x":1629676800,"y":85.58},{"x":1630281600,"y":52.81}],"label":"VirtualRide","hidden":true},{"data":[{"x":1623024000,"y":6.78},{"x":1626048000,"y":5.92}],"label":"Walk","hidden":true},{"data":[{"x":1623628800,"y":0},{"x":1628467200,"y":0}],"label":"Yoga","hidden":true}]}');
weeklyHistoryChart.update();
});<script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"></script>
<canvas id="weeklyHistory"></canvas>【问题讨论】：
标签： javascript chart.js