如何在React-Chartsjs-2中滚动X轴

Question

我已经在react.js中实现了一个条形图，我想弄清楚当值越来越多的时候如何滚动x轴。在下图中，我有一些用户一天内进行的搜索值。到目前为止，我有100天以上的时间，我认为我的问题会更大，直到我们到达年底，X轴的价值更高。

我的图表代码和选项在下面。

  const options = {
    responsive: true,
    plugins: {
      title: {
        display: true,
      },
    },
  };

  const dataForSearchBins = {
    labels,
    datasets: [
      {
        label: "Number of searches",
        data: searchBins?.map((item) => item.value),
        backgroundColor: "lightBlue",
      },
    ],
  };

<Stack>
  <Text style={{ textAlign: "center" }}>{`Number of clicks per ${binSize.toLowerCase()}`}</Text>
  <Bar options={options} data={data} />
  <Box mb={6} />
</Stack>

Answer 1

您可以使用 chartjs-plugin-zoom 为此。

import zoomPlugin from 'chartjs-plugin-zoom';
import { Chart as ChartJS} from 'chart.js';
ChartJS.register(zoomPlugin);

注册Zoom插件后，修改Options对象。

  const options = {
    responsive: true,
    plugins: {
      title: {
        display: true,
      },
      zoom: {
        pan: {
            enabled: true,
            mode: 'x'
        },
        zoom: {
            pinch: {
                enabled: true       // Enable pinch zooming
            },
            wheel: {
                enabled: true       // Enable wheel zooming
            },
            mode: 'x',
        }
    }
    },
  };