使用react-chartjs-2与Chart.js绘制折线图无线条显示问题求助

我正在借助第三方API，使用react-chartjs-2和Chart.js开发货币折线图，但图表中未显示线条，推测问题出在日期处理环节。这是我首次使用Chart.js开发Web应用，查阅官方文档后仍未找到解决方案。

dateData是存储日期的数组，元素为日期字符串而非对象；通过map循环console.log能正常输出日期，但图表中却无法显示，无法定位具体原因。API返回数据以日期为键，对应值为包含各类成本的对象，需要拆分处理。

相关代码 #

App组件代码 #

function App() {
  const [euroCurrencyData, setEuroCurrencyData] = useState([]);
  const [dateData, setDateData] = useState([]);
  const [candianCurrencyData, setCandianCurrencyData] = useState([]);

  // CHART DATA
  const [chartData, setChartData] = useState({
    labels: dateData.map((date) => date),
    datasets: [
      {
        label: "EUR",
        data: euroCurrencyData.map((currency) => currency.EUR),
        backgroundColor: ["red", "green", "blue", "black"],
      },
      {
        label: "CAD",
        data: candianCurrencyData.map((currency) => currency.CAD),
        backgroundColor: ["green", "blue", "yellow", "green"],
      },
    ],
  });

  // EURO FETCH
  const getEuroData = async () => {
    const res = await axios.get(
      "https://api.freecurrencyapi.com/v1/historical?apikey=fGfh2W2M2jvc4drZkLCdOUhJSvQqRn0ZONHPWvTq&currencies=EUR&date_from=2022-12-23T07%3A50%3A10.865Z&date_to=2023-01-23T07%3A50%3A10.866Z"
    );

    const data = res.data.data;
    const euroCurrency = Object.values(data);
    const currencyDate = Object.keys(data);

    setEuroCurrencyData(euroCurrency);
    setDateData(currencyDate);
  };

  // CANDIAN FETCH
  const getCandianData = async () => {
    const res = await axios.get(
      "https://api.freecurrencyapi.com/v1/historical?apikey=fGfh2W2M2jvc4drZkLCdOUhJSvQqRn0ZONHPWvTq&currencies=CAD&date_from=2022-12-23T13%3A05%3A35.472Z&date_to=2023-01-23T13%3A05%3A35.473Z"
    );

    const data = res.data.data;
    const candianCurrency = Object.values(data);

    setCandianCurrencyData(candianCurrency);
  };

  useEffect(() => {
    getEuroData();
    getCandianData();
  }, []);

  return (
    <div className="App">
      <div className="line-chart-container">
        <LineChart chartData={chartData} />
      </div>
    </div>
  );
}

LineChart组件代码 #

import { Line } from "react-chartjs-2";
import { Chart as ChartJS } from "chart.js";
import Chart from "chart.js/auto";
const LineChart = ({ chartData }) => {
  return <Line data={chartData} />;
};

问题现象说明 #

• API返回结构：以日期字符串为键，对应值为包含对应货币汇率的对象
• 折线图表现：仅显示坐标轴框架，无任何线条或数据点

核心问题定位 #

1. 图表数据未随状态更新：初始chartData依赖的三个状态数组都是空值，useState的初始值仅执行一次，后续API请求完成更新状态后，chartData不会自动重新计算。
2. 折线图配置缺失：仅设置了backgroundColor（填充色），未设置borderColor（线条颜色），导致线条无法显示。
3. 日期与数据可能错位：两个API请求的日期范围不一致，可能导致EUR和CAD的日期数组、数据数组不匹配。

修复步骤 #

1. 用useMemo动态计算图表数据

替换原有的useState定义chartData的方式，改用useMemo根据状态自动更新：

import { useState, useEffect, useMemo } from 'react';

// 动态生成图表数据
const chartData = useMemo(() => ({
  labels: dateData,
  datasets: [
    {
      label: "EUR",
      data: euroCurrencyData.map(currency => currency.EUR),
      borderColor: "#ff0000", // 添加线条颜色
      backgroundColor: "rgba(255, 0, 0, 0.1)", // 填充色设为半透明
      fill: true,
      tension: 0.1, // 优化线条平滑度
    },
    {
      label: "CAD",
      data: candianCurrencyData.map(currency => currency.CAD),
      borderColor: "#008000", // 添加线条颜色
      backgroundColor: "rgba(0, 128, 0, 0.1)",
      fill: true,
      tension: 0.1,
    },
  ],
}), [dateData, euroCurrencyData, candianCurrencyData]);

2. 统一API日期范围

修改getCandianData中的API请求参数，让CAD的日期范围和EUR完全一致，确保日期标签与数据点一一对应：

const getCandianData = async () => {
  const res = await axios.get(
    "https://api.freecurrencyapi.com/v1/historical?apikey=fGfh2W2M2jvc4drZkLCdOUhJSvQqRn0ZONHPWvTq&currencies=CAD&date_from=2022-12-23T07%3A50%3A10.865Z&date_to=2023-01-23T07%3A50%3A10.866Z"
  );
  // ... 其余代码不变
};

3. 可选：优化日期解析（若日期显示异常）

如果图表日期轴显示混乱，可安装日期适配器增强Chart.js的日期处理能力：

npm install chartjs-adapter-date-fns date-fns

然后在LineChart组件中导入：

import 'chartjs-adapter-date-fns';

并在chartData中添加时间轴配置：

const chartData = useMemo(() => ({
  // ... 原有内容
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day',
          tooltipFormat: 'yyyy-MM-dd'
        }
      }
    }
  }
}), [dateData, euroCurrencyData, candianCurrencyData]);

4. 修复拼写错误（可选）

将candianCurrencyData修正为canadianCurrencyData，避免后续维护混淆。

内容的提问来源于stack exchange，提问作者Omar Abdelkader