reactjs - react 图表js跳过零值月份

Question

我有一个折线图显示每月的捐款。但是我有记录显示几个月没有捐款。我的 json 数据看起来像这样。

"content": [
    {
        "donation_amount": "10",
        "avg_donation_amount": 10.0,
        "transaction_count": 1,
        "month": 2
    },
    {
        "donation_amount": "60",
        "avg_donation_amount": 60.0,
        "transaction_count": 1,
        "month": 3
    },
    {
        "donation_amount": "1556",
        "avg_donation_amount": 97.00,
        "transaction_count": 3,
        "month": 4
    }
]

哪个月份代表例如:2是二月，3是三月，4是四月。现在我仍然需要证明没有来自一月份的捐款。

这是我的js文件

async countDonationsPerMonth(){
let URL = BASE_URL+"donors_by_month";
let x = [];
let y = [];
let item = [];
try {
    const response = await fetch(URL,{
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bareer ' + this.getUserAuth()
        }
    })
    const data = await response.json();
    let content = data.content;
    content.map((item, key) =>
      y.push(item.donation_amount)
    );
    this.setState({
        donation_amount: y
    })
}catch(err){
    console.log(err)
}
}

render() {
const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    datasets: [
        {
            fill: false,
            backgroundColor: 'rgba(75,192,192,0.4)',
            borderColor: 'rgba(75,192,192,1)',
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            data: this.state.donation_amount
        }
    ]
};

return (
  <div>
    <Card title="Campaign Donations">
    <Line
      data={data}
      width={150}
      height={40}
    />
    </Card>
  </div>
);

}

数据的预期输出[0,10,60,1556,0,0,0,0,0,0,0,0]

我仍然想以零捐赠金额推送到数组。
任何帮助将非常感激。谢谢

Answer 1

用这个

y=Array.from(Array(12)).fill(0);
content.map((item,i) =>{y[parseInt(item.month)-1]=parseInt(item.donation_amount)});

.

输出示例
.

content = [{
    "donation_amount": "10",
    "avg_donation_amount": 10.0,
    "transaction_count": 1,
    "month": 2
  },
  {
    "donation_amount": "60",
    "avg_donation_amount": 60.0,
    "transaction_count": 1,
    "month": 3
  },
  {
    "donation_amount": "1556",
    "avg_donation_amount": 97.00,
    "transaction_count": 3,
    "month": 4
  }
];

y = Array.from(Array(12)).fill(0);
content.map((item, i) => {
  y[parseInt(item.month) - 1] = parseInt(item.donation_amount)
});
console.log(y);