我正在尝试实施本教程,但无法完成。https://www.chartjs.org/docs/latest/axes/cartesian/time.html
输入:具有(时间,值)属性的对象列表。Time 是 Integer,表示 UNIX 时间(以秒为单位);值为浮点数。
该教程说“日期适配器。时间刻度需要日期库和相应的适配器。请从可用的适配器中选择”。
日期库,date-fns:https://github.com/date-fns/date-fns
问题1.如何安装/包含date-fns库?文档说“npm”,但我认为它仅适用于 Node.js,但我有一个 Django 项目,Ubuntu。如果我只是下载 zip,里面有一堆文件。
适配器,chartjs-adapter-date-fns https://github.com/chartjs/chartjs-adapter-date-fns。
问题2.如何安装fns适配器?文档说“npm”,但我有一个 Django 项目,Ubuntu。但是,如果我包括<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>,我觉得就足够了。
问题3.安装适配器和日期库后,如何修复下面的脚本以使绘图正常工作(时间笛卡尔轴)?我认为这都是关于更新行point["x"] = elem.time;以将 unix 时间转换为某种适当的类型。
超文本标记语言
<canvas id="myChart"></canvas>
Run Code Online (Sandbox Code Playgroud)
JS
let points = [];
for(let elem of objs) {
point = {};
point["x"] = elem.time;
point["y"] = elem.value;
points.push(point);
}
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to …Run Code Online (Sandbox Code Playgroud)