条形图显示了正确的数据，但无法更改两个坐标轴上的文本颜色或日期格式。就好像期权是不被读取的。我使用的是React 18.2.0和 typescript 4.9.3。一些数据是日期，所以我安装了日期-fns（2.30.0）和它的适配器chartjs-adapter-date-fns（3.0.0），如ChartJs文档中所述。
这是我的数据：

const DetailsData: {
  time: string;
  loadPower: string;
}[] = [
  {
    time: '2023-01-18T02:00:00Z',
    loadPower: '2.6',
  },
  {
    time: '2023-01-18T02:15:00Z',
    loadPower: '2.4',
  },
  {
    time: '2023-01-18T02:30:00Z',
    loadPower: '2.3',
  },
]

字符串
这是我的代码组件：

import 'chartjs-adapter-date-fns';
import { Chart as ChartJS } from 'chart.js/auto';
import { Bar } from 'react-chartjs-2';
import DetailsData from './Data';

// Keep warn to avoid error "Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID '' can be reused.""
// eslint-disable-next-line no-console
console.warn(ChartJS);

function PowerChart() {
  const barData = {
    labels: DetailsData.map((data) => data.time),
    datasets: [
      {
        label: 'Load Power in KwH',
        data: DetailsData.map((data) => data.loadPower),
        backgroundColor: '#00aae1',
        borderColor: '#00aae1',
        borderWidth: 1,
        color: '#ffffff',
        font: 'Arial, "Helvetica Neue", Helvetica, sans-serif !default;',
      },
    ],
  };
  const barOptions = {
    options: {
      plugins: {
        scales: {
          x: {
            ticks: {
              color: '#ffffff',
            },
          },
          y: {
            type: 'time',
            time: {
              unit: 'hour',
            },
            ticks: {
              color: 'white',
            },
          },
        },
      },
    },
  };
  // });

  return (
    <div className="chartBox">
      <Bar
        options={barOptions}
        data={barData}
      />
    </div>
  );
}

export default PowerChart;

型
我按照installation instructions执行了chartjs-adapter-date-fns，但导入“chartjs-adapter-date-fns”时出错：

• 找不到模块'chartjs-adapter-date-fns'的声明文件。'c：/Users/XXX/frontend/node_modules/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.esm.js'隐含有'any'型别。如果npm i --save-dev @types/chartjs-adapter-date-fns已存在，请尝试使用它，或者添加一个包含'declare module 'chartjs-adapter-date-fns '的新声明（.d.ts）文件;*

我已经尝试了“npm i --save-dev @types/chartjs-adapter-date-fns”，但没有找到。
我还遵循了react-chartjs-2 doc here中建议的结构。我在bar元素的options={barOptions}上得到了一个错误：* 键入'{选项：{插件：{缩放：{ x：{分笔成交价：{颜色：字符串;}; }; y：{类型：字符串;时间：{单位：字符串;};刻度：{颜色：字符串; }; };}; }'与类型'_DeepPartialObject '没有共同的属性<...>（2559）
类型.d.ts（19，5）：预期的类型来自属性'options'，该属性在此处声明在类型'IntrinsicAttributes & Omit<ChartProps<“bar”，string[]，string>，“type”> & { ref？返回值为0。}'
（财产）期权？：_DeepPartialObject<核心图表选项<“工具栏”>元素图表选项<“工具栏”>插件图表选项<“工具栏”>数据集图表选项<“工具栏”>比例图表选项<...>和工具栏控件图表选项>*
我也得到了一个错误，如果我删除控制台。警告在顶部的评论中指出...
这是我在Stackoverflow上的第一个问题。我希望我没有忘记什么。有人能帮帮我吗？
一开始，我试图用vanilla JS中的一个函数直接格式化我的日期数据，但在react strict模式的第二次渲染中，我总是得到一个无效的日期（第一次渲染很好！）所以我按照chartjs doc中的建议来选择date-fns。我试图用一个包含props中的数据和选项的子组件来分解我的代码（事实上，这是我第一次尝试）。我还尝试在选项中插入插件语法。
我真的需要改变字体的颜色和时间刻度显示这样：03：00（无日期）
我已经在这里读了一些东西，但它似乎是旧的，我认为版本可能与我的问题有关。这是我在Stackoverflow上的第一个问题。我希望我没有忘记什么。有人能帮帮我吗？