Javascript Can'；t更改Chart.js中XAX的时间

所以我有了ChartData组件。我从API获取数据，数据通过图表显示。我有

确定格式逻辑

，主要是确定数据的时间，我有3个按钮，我正在努力实现的是当我想在按下按钮时看到7天的数据。我可以在

yAxes

中看到数据正在更改，但在

xAxes

中看不到时间正在更改，它仍然设置为小时，应该显示天

图表数据

import React, { useRef, useEffect, useState } from "react";
import 'chartjs-adapter-moment';
import annotationPlugin from 'chartjs-plugin-annotation';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
Chart.register(annotationPlugin);



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",
          },        
        ],
      },

组件的其余部分

return (
    <div className='chart__container'>
    {renderPrice()}
      {isRebuildingCanvas ? undefined : (
        <canvas ref={chartCanvasRef}  width={250} height={250} 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;

返回(
{renderPrice（）}
{isRebuildingCanvas？未定义：(
)}
setTimeFormat（“24小时”）}>24小时
setTimeFormat（“7d”）}>7d
setTimeFormat（“1y”）}>1y
);
};
导出默认图表数据；

我创建了一个没有reactjs的类似工作示例。这有助于您理解。您也可以参考。我目前面临的一个限制是，如果数据超过100，那么我在更新数据时会出错，执行数据切片，直到100，以使其正常工作

var coinData={}；
var fetchData=async（）=>{
api=”https://api.coingecko.com/api/v3";
id=“比特币”；
var[day1，week1，year1，detail1]=等待承诺。全部([
获取（api+`/coins/${id}/market\u chart/？vs\u currency=usd&days=1`）。然后（数据=>{
返回data.json（）
}),
获取（api+`/coins/${id}/market\u chart/？vs\u currency=usd&days=7`）。然后（数据=>{
返回data.json（）
}),
获取（api+`/coins/${id}/market\u chart/？vs\u currency=usd&days=365`）。然后（数据=>{
返回data.json（）
}),
获取（api+`/coins/markets/？vs_currency=usd&ids=${id}`）。然后（数据=>{
返回data.json（）
})
]);
coinData={
day:formatData（day1.prices）.slice（0，100），
周：格式化数据（周1.价格）.slice（0，100），
年份：formatData（年份1.价格）.slice（0，100），
详情：详情1[0]
}
}
常量格式数据=（数据）=>{
返回数据。映射（（el）=>{
返回{
t:el[0]，
y:el[1]。toFixed（2）
};
});
};
常量determineTimeFormat=（timeFormat）=>{
交换机（时间格式）{
案例“24小时”：
返回coinData.day；
案例“7d”：
返回coinData.week；
案例“1y”：
返回coinData.year；
违约：
返回coinData.day；
}
};
var实例；
fetchData（）。然后（（）=>{
/*console.log（coinData）*/
var ctx=document.getElementById（'chartJSContainer'）；
chartInstance=新图表（ctx{
键入：“行”，
标签：假，
数据：{
数据集：[{
标签：`${coinData.detail.name}price`，
数据：determineTimeFormat（'1d'），
解析：{
yAxisKey：‘y’，
xAxisKey:'t'，
},
背景色：“rgba（134159152，1）”，
边框颜色：“rgba（1743051940.4）”
}],
},
选项：{
比例：{
x:{
滴答声：{
资料来源：“数据”
},
键入：“时间”，
时间：{
单位：“天”
}
}
},
}
});
});
函数setTimeFormat（格式）{
Chart.instances[0]。data.dataset[0]。data=determineTimeFormat（format）；
Chart.instances[0]。更新（）；
}

24小时
7d
1y

你能在codesandbox.io/s/silly-glade-zguyt中更新它并粘贴到这里吗？不行，因为你的代码是基于reactjs的。我对此也不太清楚。这就是我使用简单JavaScript添加代码的原因。你看到我粘贴的问题了吗？我认为问题在于x轴，因为当按下按钮时，x轴的时间应该相应地改变，按下按钮时，你的整个数据都在改变。所以x和y都应该更新，因为数据正在更新。轴也在更新。实际数据正在更改，但时间（xAxes）仍设置为小时

return (
    <div className='chart__container'>
    {renderPrice()}
      {isRebuildingCanvas ? undefined : (
        <canvas ref={chartCanvasRef}  width={250} height={250} 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;