chart.js 时间不是注册比例尺

Question

我正在构建一个股票交易应用程序，并尝试计算用户随时间推移的总投资组合价值，以使用 react-chartjs-2 将其显示在仪表板中：

这是我的 nosql 数据：

// stocks array
const stocks = [
  {
    symbol: "AAPL",
    name: "Apple Inc.",
    prices: [138.4, 135.46, 140.12, 70.24, 70.17]
  },
  {
    symbol: "GOOG",
    name: "Alphabet Inc.",
    prices: [2648.76, 2695.99, 2682.71, 100.22, 100.88]
  }
];

// trades array
const trades = [
  {
    id: 1,
    user_id: "123",
    type: "buy",
    stock: "AAPL",
    quantity: 100,
    price: 138.4,
    date: "2023-02-16"
  },
  {
    id: 2,
    user_id: "123",
    type: "sell",
    stock: "AAPL",
    quantity: 50,
    price: 140.12,
    date: "2023-02-17"
  },
  {
    id: 3,
    user_id: "123",
    type: "buy",
    stock: "GOOG",
    quantity: 75,
    price: 2695.99,
    date: "2023-02-17"
  },
  {
    id: 4,
    user_id: "123",
    type: "buy",
    stock: "AAPL",
    quantity: 100,
    price: 142.24,
    date: "2023-02-18"
  },
  {
    id: 5,
    user_id: "123",
    type: "buy",
    stock: "GOOG",
    quantity: 100,
    price: 2704.22,
    date: "2023-02-18"
  },
  {
    id: 6,
    user_id: "123",
    type: "buy",
    stock: "AAPL",
    quantity: 100,
    price: 143.17,
    date: "2023-02-19"
  },
  {
    id: 7,
    user_id: "123",
    type: "buy",
    stock: "GOOG",
    quantity: 100,
    price: 2676.88,
    date: "2023-02-19"
  }
];

然后我们遍历交易数组中的每个交易对象，在股票数组中找到与每个交易相关的股票，并根据股票的历史价格计算交易的价值。生成的投资组合对象包含代表用户进行交易的每个日期的键，每个键的值是一个包含日期和值的对象：

  const portfolio = trades.reduce((acc, trade) => {
    const stock = stocks.find((s) => s.symbol === trade.stock);
    const value =
      stock.prices.find((price, index) => {
        if (
          index === stock.prices.length - 1 ||
          stock.prices[index + 1] > trade.price
        ) {
          return true;
        }
        return false;
      }) * trade.quantity;
    const date = trade.date;

    if (!acc[date]) {
      acc[date] = { date, value };
    } else {
      acc[date].value += value;
    }
    return acc;
  }, {});

  const portfolioData = Object.values(portfolio)
    .sort((a, b) => new Date(a.date) - new Date(b.date))
    .map((p) => ({ date: p.date, value: p.value.toFixed(2) }));

哪个返回：

[{"date":"2023-02-16","value":"13546.00"},{"date":"2023-02-17","value":"11074.50"},{"date":"2023-02-18","value":"17105.00"},{"date":"2023-02-19","value":"271893.00"}]

当我尝试使用 react-chartjs-2 将数据映射到折线图时，我的问题出现了：

const LineChart = ({ portfolioData }) => {
  const chartData = {
    labels: portfolioData.map((data) => data.date),
    datasets: [
      {
        label: "Portfolio Value",
        data: portfolioData.map((data) => data.value),
        fill: false,
        backgroundColor: "rgba(75,192,192,0.4)",
        borderColor: "rgba(75,192,192,1)"
      }
    ]
  };

  return <Line data={chartData} />;
};

在我的组件中使用：

<LineChart portfolioData={portfolioData} />

我得到错误：

"category" is not a registered scale.

我在这里做错了什么？完整代码和sandbox：

import "./styles.css";
import { Line } from "react-chartjs-2";

// stocks array
const stocks = [
  {
    symbol: "AAPL",
    name: "Apple Inc.",
    prices: [138.4, 135.46, 140.12, 70.24, 70.17]
  },
  {
    symbol: "GOOG",
    name: "Alphabet Inc.",
    prices: [2648.76, 2695.99, 2682.71, 100.22, 100.88]
  }
];

// trades array
const trades = [
  {
    id: 1,
    user_id: "123",
    type: "buy",
    stock: "AAPL",
    quantity: 100,
    price: 138.4,
    date: "2023-02-16"
  },
  {
    id: 2,
    user_id: "123",
    type: "sell",
    stock: "AAPL",
    quantity: 50,
    price: 140.12,
    date: "2023-02-17"
  },
  {
    id: 3,
    user_id: "123",
    type: "buy",
    stock: "GOOG",
    quantity: 75,
    price: 2695.99,
    date: "2023-02-17"
  },
  {
    id: 4,
    user_id: "123",
    type: "buy",
    stock: "AAPL",
    quantity: 100,
    price: 142.24,
    date: "2023-02-18"
  },
  {
    id: 5,
    user_id: "123",
    type: "buy",
    stock: "GOOG",
    quantity: 100,
    price: 2704.22,
    date: "2023-02-18"
  },
  {
    id: 6,
    user_id: "123",
    type: "buy",
    stock: "AAPL",
    quantity: 100,
    price: 143.17,
    date: "2023-02-19"
  },
  {
    id: 7,
    user_id: "123",
    type: "buy",
    stock: "GOOG",
    quantity: 100,
    price: 2676.88,
    date: "2023-02-19"
  }
];

const LineChart = ({ portfolioData }) => {
  const chartData = {
    labels: portfolioData.map((data) => data.date),
    datasets: [
      {
        label: "Portfolio Value",
        data: portfolioData.map((data) => data.value),
        fill: false,
        backgroundColor: "rgba(75,192,192,0.4)",
        borderColor: "rgba(75,192,192,1)"
      }
    ]
  };

  return <Line data={chartData} />;
};

const App = () => {
  const portfolio = trades.reduce((acc, trade) => {
    const stock = stocks.find((s) => s.symbol === trade.stock);
    const value =
      stock.prices.find((price, index) => {
        if (
          index === stock.prices.length - 1 ||
          stock.prices[index + 1] > trade.price
        ) {
          return true;
        }
        return false;
      }) * trade.quantity;
    const date = trade.date;

    if (!acc[date]) {
      acc[date] = { date, value };
    } else {
      acc[date].value += value;
    }
    return acc;
  }, {});

  const portfolioData = Object.values(portfolio)
    .sort((a, b) => new Date(a.date) - new Date(b.date))
    .map((p) => ({ date: p.date, value: p.value.toFixed(2) }));
  console.log(portfolioData);
  return (
    <div>
      {JSON.stringify(portfolioData)}
      <LineChart portfolioData={portfolioData} />
    </div>
  );
};

export default App;