图表 js 背景颜色未显示

Question

这里我得到了 Chartjs 组件。它内部的逻辑有效，我可以看到 y 轴的数据和标签，但问题出在 xAxes 上，由于某种原因我看不到图表的 xAxes(time) 和背景颜色/边框颜色。我不知道问题出在哪里。如果有人能帮助我，我将不胜感激。

图表组件

const determineTimeFormat = (
  timeFormat: string,
  day: any,
  week: any,
  year: any
) => {
  switch (timeFormat) {
    case "24h":
      return day;
    case "7d":
      return week;
    case "1y":
      return year;
    default:
      return day;
  }
};

interface Props {
  data: any
}

const ChartData: React.FC<Props> = ({ data }) => {
  const chartCanvasRef = useRef<HTMLCanvasElement | null>(null);
  const { day, week, year, detail } = data;
  const [timeFormat, setTimeFormat] = useState("24h");
  const [isRebuildingCanvas, setIsRebuildingCanvas] = useState(false);

  useEffect(() => {
    setIsRebuildingCanvas(true);
  }, [timeFormat]);

  useEffect(() => {
    if (isRebuildingCanvas) {
      setIsRebuildingCanvas(false);
    }
  }, [isRebuildingCanvas]);

  useEffect(() => {
      if (chartCanvasRef && chartCanvasRef.current && detail) {
    const chartCanvas = chartCanvasRef.current
    if (isRebuildingCanvas || !chartCanvas) {
      return;
    }
  
    const chartInstance = new Chart(chartCanvasRef.current, {
      type: "line",
      data: {
        datasets: [
          {
            label: `${detail.name} price`,
            data: determineTimeFormat(timeFormat, day, week, year),
            backgroundColor: 'rgba(134,159,152, 1)',
            borderColor: "rgba(174, 305, 194, 0.4",
            pointRadius: 0,
          },
        ],
      },

选项

 options: {
        lineHeightAnnotation: {
          always: true,
          hover: true,
          lineWeight: 1.5,
        },
      
        animation: {
          duration: 2000,
        },
        maintainAspectRatio: true,
        responsive: true,
        scales: {
          x: [{         
              type: "time",
              distribution: "linear"
            },            
          ],
        },
      },