chartjs 时间笛卡尔轴适配器和日期库设置
chartjs time cartesian axis adapter and date library setup
我正在尝试实施本教程,但未能完成。 https://www.chartjs.org/docs/latest/axes/cartesian/time.html
输入:具有(时间,值)属性的对象列表。时间是整数,表示以秒为单位的 unix 时间;值为浮点数。
教程说“日期适配器。时间刻度需要日期库和对应的适配器。请选择来自可用的适配器。
日期库,date-fns:https://github.com/date-fns/date-fns
问题1.如何install/includedate-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.安装了adapter和date library后,如何修改下面的脚本才能让剧情正常运行(笛卡尔时间轴)?我认为这完全是关于更新行 point["x"] = elem.time;
以将 unix 时间转换为某种适当的类型。
HTML
<canvas id="myChart"></canvas>
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 create
type: 'line',
// The data for our dataset
data: points,
// Configuration options go here
options: {
responsive: false,
scales: {
x: {
type: 'time',
}
}
}
});
安装所有 3 个必需的库确实可以使用脚本标签完成,请参阅下面的实例。
您的数据未显示的原因是 chart.js 不希望数据字段中有数据数组。在数据字段中,它期望一个对象至少具有所有 datasets
的键,它是一个数组和一个可选的标签数组,但由于您对数据使用对象格式,因此标签数组不是必需的。
每个数据集都有自己的图例标签,在数据集对象中,您可以在数据字段中配置数据数组。查看实例:
const options = {
type: 'line',
data: {
datasets: [{
label: '# of Votes',
data: [{
x: 1632664468243,
y: 5
}, {
x: 1632664458143,
y: 10
}],
borderColor: 'pink'
}]
},
options: {
scales: {
x: {
type: 'time'
}
}
}
}
const ctx = document.getElementById('tt').getContext('2d');
new Chart(ctx, options);
<canvas id="tt"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
我正在尝试实施本教程,但未能完成。 https://www.chartjs.org/docs/latest/axes/cartesian/time.html
输入:具有(时间,值)属性的对象列表。时间是整数,表示以秒为单位的 unix 时间;值为浮点数。
教程说“日期适配器。时间刻度需要日期库和对应的适配器。请选择来自可用的适配器。
日期库,date-fns:https://github.com/date-fns/date-fns
问题1.如何install/includedate-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.安装了adapter和date library后,如何修改下面的脚本才能让剧情正常运行(笛卡尔时间轴)?我认为这完全是关于更新行 point["x"] = elem.time;
以将 unix 时间转换为某种适当的类型。
HTML
<canvas id="myChart"></canvas>
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 create
type: 'line',
// The data for our dataset
data: points,
// Configuration options go here
options: {
responsive: false,
scales: {
x: {
type: 'time',
}
}
}
});
安装所有 3 个必需的库确实可以使用脚本标签完成,请参阅下面的实例。
您的数据未显示的原因是 chart.js 不希望数据字段中有数据数组。在数据字段中,它期望一个对象至少具有所有 datasets
的键,它是一个数组和一个可选的标签数组,但由于您对数据使用对象格式,因此标签数组不是必需的。
每个数据集都有自己的图例标签,在数据集对象中,您可以在数据字段中配置数据数组。查看实例:
const options = {
type: 'line',
data: {
datasets: [{
label: '# of Votes',
data: [{
x: 1632664468243,
y: 5
}, {
x: 1632664458143,
y: 10
}],
borderColor: 'pink'
}]
},
options: {
scales: {
x: {
type: 'time'
}
}
}
}
const ctx = document.getElementById('tt').getContext('2d');
new Chart(ctx, options);
<canvas id="tt"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>