如何在Chart.js中按日期格式设置X轴标签？

看起来你遇到了两个核心问题：Moment.js未正确引入，以及数据格式不符合Chart.js Time轴的要求，我来一步步帮你解决：

1. 修复Moment.js引入错误 #

Chart.js的Time刻度确实依赖Moment.js，但你的代码里完全没引入它，还存在脚本标签的拼写错误：

• 首先，要在Chart.js之前引入Moment.js（可以用本地文件或公共CDN）
• 你脚本标签里的srx是拼写错误，应该改为src，否则你的自定义JS文件根本不会加载
• 正确的脚本引入顺序必须是：Moment.js → Chart.js → 你的自定义脚本

2. 修正数据格式问题 #

你直接把jsonObj["values"]赋值给labels和data是不对的。Chart.js的Time轴需要明确的时间-数值对，我们需要把Unix时间戳转换为Date对象，同时提取对应的数值：

完整修正后的代码 #

HTML部分 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bitcoin Transactions Chart</title>
    <!-- 先引入Moment.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <!-- 再引入Chart.js -->
    <script src="node_modules/chart.js/dist/Chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="100%" height="100%"></canvas>
    <!-- 最后引入自定义脚本 -->
    <script src="myChart.js"></script>
</body>
</html>

自定义JS部分（myChart.js） #

var requestURL = 'https://blockchain.info/de/charts/market-price?format=json&cors=true';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();

request.onload = function() {
    var response = request.response;
    drawChart(response);
}

function drawChart(jsonObj) {
    // 处理数据：把Unix时间戳转为Date对象，提取x和y
    const chartData = jsonObj.values.map(item => ({
        x: new Date(item.x * 1000), // Unix时间戳是秒级，要转成毫秒才能被Date识别
        y: item.y
    }));

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                label: jsonObj.name,
                data: chartData, // 使用处理后的数据集
                fill: false,
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }],
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'month', // 按月份分组显示标签
                        displayFormats: {
                            month: 'YYYY年MM月' // 自定义日期显示格式
                        },
                        tooltipFormat: 'YYYY年MM月DD日' // 鼠标hover时的日期格式
                    }
                }]
            }
        }
    });
}

关键修改说明 #

1. 时间戳转换：Unix时间戳是秒级的，需要乘以1000转为毫秒才能被Date对象识别
2. 数据结构：用map把原始数据转换为Chart.js需要的{x: Date, y: Number}格式
3. 日期显示配置：通过time.unit设置分组单位（比如month），用displayFormats自定义标签的日期格式
4. 脚本顺序：确保Moment.js在Chart.js之前加载，避免依赖报错

这样修改后，你的图表应该能正常显示，X轴也会按照你想要的日期格式展示了。

内容的提问来源于stack exchange，提问作者Pascal S