在 ChartJS 中使用多个日期轴
Working with multiple date axes in ChartJS
我正在尝试设置一个包含 2 个数据集的图表,1 个数据集作为一条线显示一个月的中值,1 个数据集作为散点图显示某一天的值。每日日期不需要显示在 x 轴上。
我在应用程序的其他地方使用 dayjs 作为我的时间格式库,所以我尝试使用 chartjs-adapter-dayjs-3 library.
我很乐意自己为数据管理 x,y 对象的构造。
我已经设置了一个 codepen 来显示我认为应该起作用的东西,但我现在只是得到一张空白图表,所以我显然做错了什么。
import dayjs from "https://cdn.skypack.dev/dayjs@1.10.7";
import * as chartjsAdapterDayjs from "https://cdn.skypack.dev/chartjs-adapter-dayjs@1.0.0";
const ctx = document.getElementById("myChart");
const today = dayjs()
const myChart = new Chart(ctx, {
data: {
datasets: [
{
label: "Median Sales",
data: [
{x: today, y: 10},
{x: today.add(1, 'month'), y: 20},
{x: today.add(2, 'month') , y: 15}
],
type: "line",
xAxisID: 'x1'
},
{
label: 'Individual Sales Prices',
data: [{x: today, y: 8}],
type: 'scatter',
xAxisID: 'x2'
}
]
},
options: {
scales: {
x1: {
type: 'time',
time: {
unit: 'month'
}
},
x2: {
type: 'time',
time: {
unit: 'day'
}
}
}
}
});
我发现关于基于时间的数据和坐标轴目前应该如何工作有点不清楚,因此我们将不胜感激。
所需布局
您遇到的问题是因为两件事。第一件事是您没有使用您所说的日期适配器。您正在使用另一个并使用 skypack 导入它,这有一个很大的副作用,即 import Chart.js 本身。 skypack导入的Chart.js版本是2.
您链接的库似乎没有在您的浏览器中突然出现的可用构建,即使他们的示例使用脚本标签也是如此。因此,如果您想使用 day.js,您将需要编写自己的日期适配器。
仅使用 js 日期和使用 date-fns 日期适配器的示例:
let start = new Date(),
end = new Date();
start.setDate(start.getDate() - 7); // set to 'now' minus 7 days.
start.setHours(0, 0, 0, 0); // set to midnight.
new Chart(document.getElementById("lastSevenDaysOverview"), {
type: "line",
data: {
datasets: [{
label: 'Dataset 1',
data: [{
x: new Date('10-16-2021'),
y: 1
}, {
x: new Date('10-18-2021'),
y: 4
}, {
x: new Date('10-19-2021'),
y: 66
}],
borderColor: '#ff3366',
backgroundColor: '#ff3366',
},
{
label: 'Dataset 2',
data: [{
x: new Date('10-16-2021'),
y: 31
}, {
x: new Date('10-18-2021'),
y: 14
}, {
x: new Date('10-19-2021'),
y: 6
}],
borderColor: '#880000',
backgroundColor: '#880000'
}
]
},
options: {
interaction: {
mode: 'index',
intersect: true,
},
responsive: true,
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
},
x: {
type: "time",
time: {
unit: "day"
}
}
},
}
});
<canvas id="lastSevenDaysOverview"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
我正在尝试设置一个包含 2 个数据集的图表,1 个数据集作为一条线显示一个月的中值,1 个数据集作为散点图显示某一天的值。每日日期不需要显示在 x 轴上。
我在应用程序的其他地方使用 dayjs 作为我的时间格式库,所以我尝试使用 chartjs-adapter-dayjs-3 library.
我很乐意自己为数据管理 x,y 对象的构造。
我已经设置了一个 codepen 来显示我认为应该起作用的东西,但我现在只是得到一张空白图表,所以我显然做错了什么。
import dayjs from "https://cdn.skypack.dev/dayjs@1.10.7";
import * as chartjsAdapterDayjs from "https://cdn.skypack.dev/chartjs-adapter-dayjs@1.0.0";
const ctx = document.getElementById("myChart");
const today = dayjs()
const myChart = new Chart(ctx, {
data: {
datasets: [
{
label: "Median Sales",
data: [
{x: today, y: 10},
{x: today.add(1, 'month'), y: 20},
{x: today.add(2, 'month') , y: 15}
],
type: "line",
xAxisID: 'x1'
},
{
label: 'Individual Sales Prices',
data: [{x: today, y: 8}],
type: 'scatter',
xAxisID: 'x2'
}
]
},
options: {
scales: {
x1: {
type: 'time',
time: {
unit: 'month'
}
},
x2: {
type: 'time',
time: {
unit: 'day'
}
}
}
}
});
我发现关于基于时间的数据和坐标轴目前应该如何工作有点不清楚,因此我们将不胜感激。
所需布局
您遇到的问题是因为两件事。第一件事是您没有使用您所说的日期适配器。您正在使用另一个并使用 skypack 导入它,这有一个很大的副作用,即 import Chart.js 本身。 skypack导入的Chart.js版本是2.
您链接的库似乎没有在您的浏览器中突然出现的可用构建,即使他们的示例使用脚本标签也是如此。因此,如果您想使用 day.js,您将需要编写自己的日期适配器。
仅使用 js 日期和使用 date-fns 日期适配器的示例:
let start = new Date(),
end = new Date();
start.setDate(start.getDate() - 7); // set to 'now' minus 7 days.
start.setHours(0, 0, 0, 0); // set to midnight.
new Chart(document.getElementById("lastSevenDaysOverview"), {
type: "line",
data: {
datasets: [{
label: 'Dataset 1',
data: [{
x: new Date('10-16-2021'),
y: 1
}, {
x: new Date('10-18-2021'),
y: 4
}, {
x: new Date('10-19-2021'),
y: 66
}],
borderColor: '#ff3366',
backgroundColor: '#ff3366',
},
{
label: 'Dataset 2',
data: [{
x: new Date('10-16-2021'),
y: 31
}, {
x: new Date('10-18-2021'),
y: 14
}, {
x: new Date('10-19-2021'),
y: 6
}],
borderColor: '#880000',
backgroundColor: '#880000'
}
]
},
options: {
interaction: {
mode: 'index',
intersect: true,
},
responsive: true,
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
},
x: {
type: "time",
time: {
unit: "day"
}
}
},
}
});
<canvas id="lastSevenDaysOverview"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>