在react-vis时间刻度轴中设置24小时时间格式

import React from 'react';
import { XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries } from 'react-vis';
import moment from 'moment';

class TimeAxis extends React.Component {
  render() {
    // 定义要显示的数据
    const data = [
      { x: new Date('2022-01-01T00:00:00'), y: 10 },
      { x: new Date('2022-01-01T06:00:00'), y: 5 },
      { x: new Date('2022-01-01T12:00:00'), y: 15 },
      { x: new Date('2022-01-01T18:00:00'), y: 8 },
    ];

    // 定义时间格式
    const tickFormat = (t) => moment(t).format('HH:mm');

    return (
      <XYPlot width={500} height={300}>
        <HorizontalGridLines />
        <LineSeries data={data} />
        <XAxis tickFormat={tickFormat} />
        <YAxis />
      </XYPlot>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>React Vis时间刻度轴</h1>
        <TimeAxis />
      </div>
    );
  }
}

export default App;