chart.js 3 和时间轴显示错误的日期数据
Posted
技术标签:
【中文标题】chart.js 3 和时间轴显示错误的日期数据【英文标题】：chart.js 3 and time axis displays wrong date data 【发布时间】：2022-01-12 01:47:00 【问题描述】：我很难让 chart.js 在时间轴上运行。
我有以下简化代码：
<html>
<head>
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
-->
<script src="https://cdn.jsdelivr.net/npm/moment"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
</head>
<body>
<canvas id="chart" ></canvas>
<script type="text/javascript">
window.onload = function ()
var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx,
type: 'line',
data:
datasets:[
data: [
x: '2017-01-06', y: 50 ,
x: '2017-01-15', y: 45 ,
x: '2017-03-07', y: 35 ,
]
]
,
options:
scales:
xAxes: [ type: 'time', ]
);
;
</script>
</body>
</html>当包含最新的 3.4.0 chart.js 时，时间轴的格式不正确（数据点均匀分布在 x 轴上）。但是在使用 2.9.3 版本时，显示正确（数据点不均匀分布）。
小提琴不工作（使用 3.4.0）：https://jsfiddle.net/ungoq8j6/1/ 小提琴工作（使用 2.9.3）：https://jsfiddle.net/ungoq8j6/2/
根据文档（关于该主题的内容完全模糊），您必须包含一个日期库和一个适配器（此处为 moment.js + chartjs-adapter-moment）。
该脚本仅在客户端使用，因此没有可用的 node.js/npm。
【问题讨论】：
【参考方案1】：您的配置错误，在 v3 中您必须定义比例的方式已更改，请阅读迁移指南：https://www.chartjs.org/docs/master/getting-started/v3-migration.html#scales
工作示例：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/moment"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
</head>
<body>
<canvas id="chart" ></canvas>
<script type="text/javascript">
window.onload = function()
var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx,
type: 'line',
data:
datasets: [
data: [
x: '2017-01-06',
y: 50
,
x: '2017-01-15',
y: 45
,
x: '2017-03-07',
y: 35
,
]
]
,
options:
scales:
x:
type: 'time',
);
;
</script>
</body>
</html>【讨论】：
非常感谢！这按预期工作。似乎从互联网上复制 sn-ps 并不总是最好的解决方案......以上是关于chart.js 3 和时间轴显示错误的日期数据的主要内容，如果未能解决你的问题，请参考以下文章