Chart.js时间笛卡尔轴date-fns适配器与日期库配置及代码修复咨询

问题1：Ubuntu环境Django项目引入date-fns的方案 #

你无需使用npm，也不用下载完整源码压缩包，两种可选方案：

• 方案1（推荐，无需本地存储）：直接从公共静态资源CDN获取date-fns的生产环境打包单文件，在需要渲染图表的Django模板中引入对应script标签即可。
• 方案2（本地静态资源引入）：下载date-fns的min.js格式生产环境打包文件，放到Django项目的static静态资源目录下，在模板中通过Django静态资源标签引入即可，示例代码如下：

{% load static %}
<script src="{% static 'js/date-fns.min.js' %}"></script>

问题2：chartjs-adapter-date-fns适配器引入方案 #

你提到的直接引入对应CDN资源的方式是足够的，只需要注意两点：

• 你使用的bundle版本适配器已经内置了date-fns核心依赖，无需额外单独引入上一步的date-fns资源，二者选其一即可避免重复加载。
• 引入顺序必须满足：先引入Chart.js本体文件，再引入适配器文件，顺序错误会导致适配器失效。

问题3：代码修改实现正常渲染 #

你的代码存在两处核心问题，按如下修改即可：

1. 你持有的是秒级Unix时间戳，而JS时间处理默认使用毫秒级时间戳，需要做单位转换，适配器也支持直接传入Date对象，两种写法都可生效。
2. Chart.js的data配置结构错误，不能直接把坐标点数组赋值给data属性，需要嵌套到datasets配置项中。

修改后的完整代码如下：
HTML代码：

<canvas id="myChart"></canvas>

JS代码：

let points = [];
for(let elem of objs) {
    let point = {};
    // 秒级时间戳转毫秒级，也可替换为 new Date(elem.time * 1000)
    point["x"] = elem.time * 1000;
    point["y"] = elem.value;
    points.push(point);
}

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    // 修正data结构
    data: {
        datasets: [{
            label: '数据指标', // 可自定义图例显示的名称
            data: points,
            borderColor: '#2196F3', // 可自定义线条颜色
            tension: 0.1
        }]
    },
    options: {
        responsive: false,
        scales: {
            x: {
                type: 'time',
                // 可选配置：自定义时间显示的最小单位
                time: {
                    unit: 'second'
                }
            }
        }
    }
});

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