Chartjs 缩放插件最大缩放范围

问题描述 投票:0回答:0

我用 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,
              },
            },
          },
        },
      },
    }
javascript reactjs chart.js date-fns
© www.soinside.com 2019 - 2024. All rights reserved.