javascript - Chart .js 方法未实现

Question

所以问题是这样的。我的 x 没有显示(时间)，我看不到图表的时间或 (x)，我收到此错误 错误:此方法未实现:找不到适配器或集成不完整提供。 我已经尝试了很多东西，我已经把互联网颠倒了，在那里我找到了一些关于向 xAxes 添加刻度的博客，这会有所帮助，但没有帮助。请有人帮助我图表.js

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

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: {      
        animation: {
          duration: 2000,
        },
        maintainAspectRatio: false,
        responsive: true,
        scales: {
          x: 
            {
              type: "time",
            },  
        },
      }
    });
    return () => {
      chartInstance.destroy();
    }
  }}, [day, isRebuildingCanvas,timeFormat, week, year, detail]);

相同的组件

 return (
    <div className='chart__container'>
    {renderPrice()}
      {isRebuildingCanvas ? undefined : (
        <canvas ref={chartCanvasRef} id='myChart'></canvas>
      )}
      <button className='time__format' onClick={() => setTimeFormat("24h")}>24h</button>
      <button className='time__format' onClick={() => setTimeFormat("7d")}>7d</button>
      <button className='time__format'  onClick={() => setTimeFormat("1y")}>1y</button>
    </div>
  );
};

export default ChartData;

Answer 1

根据这个document

The time scale requires both a date library and a corresponding adapter to be present

所以如果你正在使用 npm

npm install moment chartjs-adapter-moment --save-dev

在你的文件中

import { Chart } from 'chart.js'
import 'chartjs-adapter-moment';

您可以使用描述的任何其他适配器 here