如何在 React Chart JS 中限制 xAxes 和 yAxes？

Question

我正在嘗試使用 React 18 中的圖表 js 制作下圖：

到目前為止，我已經編寫了以下代碼並嘗試通過 maxTicksLimit 限制 x 和 y 軸，但我想我在這里遺漏了一些東西：

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
  };

  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
      }
    ],
    scales: {
      xAxes: [
        {
          ticks: {
            maxTicksLimit: 9
          }
        }
      ],
      yAxes: [
        {
          ticks: {
            maxTicksLimit: 4
          }
        }
      ]
    }
  };

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

我得到以下 output：

我將不勝感激任何幫助CodeSandBox

Answer 1

要解決您的問題，請按如下方式定義options 。

const options = {
  responsive: true,
  scales: {
    x: {
      ticks: {
        maxTicksLimit: 9
      }
    },
    y: {
      ticks: {
        maxTicksLimit: 4
      }
    }
  }
};

有關詳細信息，請參閱 Chart.js 文檔中的勾選配置選項。

請查看您修改后的CodeSandbox ，看看它是如何工作的。