0

我有存储在 MongoDB 中的数据，如下所示：（以下 1 个文档的示例）

{_id: XXX, 
project: 'Project ABC', 
amount: 300, 
expenseIncurredDate: 2022-03-15T08:24:46.000+00:00
}

我试图在堆积条形图中显示我的数据，其中 x 轴是年月，y 轴是金额。在每年的每个月内，不同的项目可能会产生若干费用。

我正在尝试实现类似的目标，除了 x 轴应显示年月（例如 2021 年 1 月）。每个项目应该用一种颜色代表每个年月。 在此处输入图像描述

我正在使用 Chart.js。下面是我的 Bar 组件。


import { Bar } from "react-chartjs-2";
import { Chart as ChartJS } from "chart.js/auto";
import React from "react";

const BarChart = ({ chartData }) => {
  const options = {
    responsive: true,
    legend: {
      display: false,
    },
    type: "bar",
    scales: {
      xAxes: [
        {
          stacked: true,
        },
      ],
      yAxes: [
        {
          stacked: true,
        },
      ],
    },
  };

  return <Bar data={chartData} options={options} />;
};

export default BarChart;

我正在另一个组件中处理我的数据：

  let datasets = [];

  function random_bg_color() {
    var x = Math.floor(Math.random() * 256);
    var y = 100 + Math.floor(Math.random() * 256);
    var z = 50 + Math.floor(Math.random() * 256);
    var bgColor = "rgb(" + x + "," + y + "," + z + ")";
    return bgColor;
  }


  let amounts = myExpenses.map((expense) => expense.amount);
  myExpenses.forEach((expense) => {
    const expenseObj = {
      label: expense.project,
      stack: 1,
      borderWidth: 1,
      backgroundColor: random_bg_color(),
      data: amounts,
    };
    datasets.push(expenseObj);
  });
  let data = {
    labels: myExpenses.map((expense) =>
      moment(expense.expenseDate, "DD-MM-YYYY")
    ),
    datasets: datasets,
 
  };

我知道这不起作用，因为它没有按正确的顺序/按年和月分组返回金额。

let amounts = myExpenses.map((expense) => expense.amount);

我很难按年月对金额进行分组。非常感谢您对此的任何帮助，谢谢。

4

0 回答 0