如何在React Chart JS中限制x轴与y轴刻度？

我在React 18中使用Chart.js制作目标折线图，尝试通过maxTicksLimit限制x、y轴刻度数量，但设置后未达到预期效果，当前输出与目标图不符。

问题原因 #

当前使用的Chart.js版本（v3+，对应react-chartjs-2 v4+）配置结构已更新：

• 轴配置不再通过xAxes/yAxes数组定义，而是直接在scales下用x/y对象配置
• 刻度限制等轴相关配置需要放在options中，而非data对象内

原代码错误地将scales配置放在了datax（即Chart.js的data对象）里，同时使用了旧版本的轴配置结构，导致maxTicksLimit不生效。

修正后的代码 #

import "./styles.css";
import { data } from "./data";
import { Line } from "react-chartjs-2";
import moment from "moment";

export default function App() {
  const series = data.cpu.values.map((item) => item[1]);
  const labels = data.cpu.values.map((item) =>
    moment(item[0] * 1000).format("hh:mm:ss")
  );

  const options = {
    responsive: true,
    // 将scales配置移到options内
    scales: {
      x: {
        ticks: {
          maxTicksLimit: 9 // 直接配置x轴刻度数量
        }
      },
      y: {
        ticks: {
          maxTicksLimit: 4 // 直接配置y轴刻度数量
        }
      }
    }
  };

  const datax = {
    labels,
    datasets: [
      {
        label: "CPU USAGE",
        data: series,
        borderColor: "rgb(255, 99, 132)",
        backgroundColor: "rgba(255, 99, 132, 0.5)",
        pointRadius: 0,
        fill: true
      }
    ]
  };

  return (
    <div className="App">
      <Line options={options} data={datax} />
    </div>
  );
}

关键修改点 #

• 将轴配置scales从datax对象移至options对象中
• 把旧的xAxes/yAxes数组结构替换为x/y对象结构
• 确保maxTicksLimit配置在对应轴的ticks层级下

内容的提问来源于stack exchange，提问作者Mohammad A. Souri