ChartJS图形“左移”时如何防止“摆动”

Question

我有一个 react chartjs 图表，它仅限于最新的 12 个条目，当达到 12 个条目时，图表会按预期向左移动，但是正如您在视频中看到的那样，它在“摆动”，这使得它不可读。 我认为问题是由动画引起的，但是我想保留动画，而不是让图形像 12 个条目之前那样“正确”移动。

视频：https://www.youtube.com/watch?v=M-WSsifOK7U

代码：

export default function DataGraph(props) {
  const [options] = React.useState({
    responsive: true,
    animation: {
      duration: 1000,
      easing: 'easeOutSine',
    },
    plugins: {
      legend: {
        display: false,
      },
      title: {
        display: true,
        text: props.title,
      },
    },
    elements: {
      point: {
        radius: 0,
      },
    },
  });

  const [data, setData] = React.useState({
    labels: [],
    datasets: [
      {
        label: 'Dataset 1',
        data: [],
        borderColor: '#49eacb',
        backgroundColor: 'rgba(73, 234, 203, 0.5)',
        lineTension: 0.3,
      },
    ],
  });
  const addData = (value) => {
    const currentTime = new Date();
    const formattedTime = currentTime.toLocaleTimeString('en-US', {
      hour: 'numeric',
      minute: '2-digit',
      second: '2-digit',
      hour12: true,
    });

    setData((prevData) => {
      const newLabels = [...prevData.labels, formattedTime].slice(-12);
      const newData = [
        {
          ...prevData.datasets[0],
          data: [...prevData.datasets[0].data, value].slice(-12),
        },
      ];
      return {labels: newLabels, datasets: newData};
    });
  };

  const dynamicAdd = () => {
    setInterval(() => {
      addData(Math.floor(Math.random() * 100));
    }, 1000);
  };

  React.useEffect(() => {
    dynamicAdd();
  }, []);

  return (
    <div>
      <Line options={options} data={data} />
    </div>

  );
}

Answer 1

您遇到的“摆动”效果是由于动画试图在添加每个新数据点时将图表向左移动。要解决此问题，您可以尝试更新图表选项以在数据点数达到 12 时将 x 轴的动画属性设置为 false。这将禁用 x 轴的动画并停止图表“摆动”。

export default function DataGraph(props) {
  const [options, setOptions] = React.useState({
    responsive: true,
    animation: {
      duration: 1000,
      easing: 'easeOutSine',
    },
    plugins: {
      legend: {
        display: false,
      },
      title: {
        display: true,
        text: props.title,
      },
    },
    elements: {
      point: {
        radius: 0,
      },
    },
  });

  const [data, setData] = React.useState({
    labels: [],
    datasets: [
      {
        label: 'Dataset 1',
        data: [],
        borderColor: '#49eacb',
        backgroundColor: 'rgba(73, 234, 203, 0.5)',
        lineTension: 0.3,
      },
    ],
  });

  const addData = (value) => {
    const currentTime = new Date();
    const formattedTime = currentTime.toLocaleTimeString('en-US', {
      hour: 'numeric',
      minute: '2-digit',
      second: '2-digit',
      hour12: true,
    });

    setData((prevData) => {
      const newLabels = [...prevData.labels, formattedTime].slice(-12);
      const newData = [
        {
          ...prevData.datasets[0],
          data: [...prevData.datasets[0].data, value].slice(-12),
        },
      ];
      return {labels: newLabels, datasets: newData};
    });

    // Disable animation for x axis when there are 12 data points
    if (data.labels.length >= 11) {
      setOptions({
        ...options,
        animation: {
          ...options.animation,
          x: false,
        },
      });
    }
  };

  const dynamicAdd = () => {
    setInterval(() => {
      addData(Math.floor(Math.random() * 100));
    }, 1000);
  };

  React.useEffect(() => {
    dynamicAdd();
  }, []);

  return (
    <div>
      <Line options={options} data={data} />
    </div>
  );
}

在 addData 函数中，我们检查数据点的数量是否达到 12。如果达到，我们使用 setOptions 函数将图表选项中 x 轴的动画属性更新为 false。