我用 chartjs 创建了一个图表,它是一个 X 轴上有时间的折线图。
我添加了 chartjs 缩放插件并设置了 minRange,这样用户在过去 7 天内无法缩放。我正在尝试通过缩小来做同样的事情,但我想将其限制为 30 天。我试过更改缩放限制的最小/最大值,但没有成功。
我正在使用 date-fns 适配器 (chartjs-adapter-date-fns) 和 date-fns 包中的 subDays() 和 addDays() 函数
这是我的配置:
{
type: "line",
data: {
datasets: [
{
data: data,
fill: true,
pointRadius: 3,
},
],
},
options: {
responsive: true,
adapters: {
date: {
locale: enUS,
},
},
scales: {
y: {
grid: {
display: true,
drawTicks: false,
},
ticks: {
callback: (value: number) => {
if (value === 0) return "";
return Math.round(value).toLocaleString();
},
},
},
x: {
type: "time",
min: subDays(maxDate, 30),
max: maxDate,
ticks: {
source: "auto",
autoSkip: true,
minor: {
enabled: true,
fontStyle: "normal",
},
major: {
enabled: true,
fontStyle: "bold",
},
},
},
},
plugins: {
zoom: {
limits: {
y: {
min: 0,
},
x: {
minRange: 7 * 24 * 60 * 60 * 1000,
min: minDate,
max: maxDate,
},
},
pan: {
drag: true,
mode: "xy",
enabled: true,
},
zoom: {
mode: "x",
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
},
},
},
},
}