帶有縮放插件的 Chartjs，如何在圖表上設置限制數據顯示

Question

我使用 Angular v13 和 chartjs v3，我還安裝了 chartjs-plugin-zoom，它非常適合條形圖，但對於時間條形圖，它不能按預期工作，這是我的問題：

當我從 api 獲取數據時，例如 24 小時內的 50 條記錄並在圖表中顯示，我只想顯示 10 個條形圖（用戶可以向左或向右平移以查看下一個數據）但圖表始終顯示所有條形圖

24 小時時間條形圖

我想讓它像這樣顯示，我按日期獲取數據，10 個日期顯示總是 10 個或更少的條

10天時間條形圖

那么如何歸檔條形圖顯示的限制數量呢？ 就像我得到超過 10 條記錄，如何讓它只顯示 10 條，然后用戶可以向左平移以查看下一個數據

我在圖表中使用了一些選項

{
  animation: {
    duration: 0,
  },
  maintainAspectRatio: false,
  responsive: true,
  scales: {
    y: {
      beginAtZero: true,
      grid: {
        drawBorder: false,
      },
      grace: '10%',
    },
    x: {
      grid: {
        display: false,
      },
      type: 'time',
      display: true,
      time: {
        unit: 'day',
        unitStepSize: 1,
        displayFormats: {
          day: ChartOptionConstants.DATE_FORMAT,
        },
      },
      title: {
        display: true,
        text: 'DOC',
      },
      ticks: {
        autoSkip: true,
        maxRotation: 0,
        maxTicksLimit: 8
      },
    },
  },
  interaction: {
    mode: 'index',
    intersect: false,
  },
  plugins: {
    title: {
      display: false,
      text: this.chartTitle,
    },
    legend: {
      display: true,
      labels: {
        font: {
          size: 9,
        },
        usePointStyle: true,
      },
    },
    tooltip: {
      position: 'top',
      caretSize: 0,
    },
  },
};

縮放插件選項

{
  pan: {
    enabled: true,
    mode: 'x',
  },
  zoom: {
    wheel: {
      enabled: true,
    },
    pinch: {
      enabled: true,
    },
    mode: 'x',
  },
};

Answer 1

縮放插件在其配置中提供了limits節點，您可以在其中設置軸上的限制。

也許它可以幫助您的用例： https://www.chartjs.org/chartjs-plugin-zoom/latest/guide/options.html#limits