如何在ChartJS中显示来自Mongodb的数据？

Question

我有一个饼图，我需要显示其中“帖子”中的数据 有谁知道该怎么做吗？

const DoughnutChartComponent = (post) => {

const Ferum = isNaN(parseInt(post.title)) ? 0 : parseInt(post.title);
const Sulfur = isNaN(parseInt(post.text)) ? 0 : parseInt(post.text);
console.log('post.title:', post.title);
console.log('post.text:', post.text);
  console.log('Переменные', Ferum, Sulfur);
  const Other = 100-(Ferum + Sulfur);
      const data = {
          // labels: ['Fe, S, Other'],
          datasets: [{
            // label: ['Fe, S, Other'],
            data: [Ferum, Sulfur, Other],
            backgroundColor: [
              '#F7BA4E',
              '#D9D9D9',
              '#12191F',
            ],
            border: false,
            borderRadius : 3,
          },]
        };

      const options = {
          cutout: 60,
          responsive: true,
        };
      return <Doughnut data={data} options={options} />;
  };

我的代码似乎可以工作，但它输出“未定义”而不是我的值

以下是“帖子”的内容：

    {
  "_id": {
    "$oid": "6620ab8e815e0cddc8e0a7eb"
  },
  "username": "admin",
  "title": 54,
  "text": 23,
  "author": {
    "$oid": "6616156147d6e906caaf659d"
  },
  "comments": [],
  "createdAt": {
    "$date": "2024-04-18T05:11:43.026Z"
  },
  "updatedAt": {
    "$date": "2024-04-18T05:11:43.026Z"
  },
  "__v": 0
}

有很多帖子，但我需要从最后一篇获取数据。 图表渲染代码：

import React, {useState} from 'react'
import { DoughnutChartComponent as Doughnut } from "../components/Chart.jsx"
import { useDispatch } from 'react-redux'
import {createPost} from '../../redux/features/post/postSlice.js'
export const OreComposition = () => {
  const [title, setTitle] = useState('')
    const [text, setText] = useState('')
    const [image, setImage] = useState('')

    const dispatch = useDispatch()
  const submitHandler = () => {
    try {
      const data = new FormData()
            data.append('title', title)
            data.append('text', text)
            
            dispatch(createPost(data))
    } catch (error) {
      console.log(error)
    }
  }
  return (
    <div className='add-title h-screen flex justify-around items-center text-center ml-[246px]'>
      <div className='bg-[#313d44] rounded-lg py-3 px-10 w-50'>
        <form onSubmit={e => e.preventDefault()}
      className='mt-10 w-40 h-50 '>
        <h1 className='w-40 text-lg text-white text-center'>Ore composition</h1>
        <input
        value={image}
        onChange={e => setImage(e.target.value)}
        type="file"
        style={{display: 'none'}}/>
        <label className='text-xs text-[white] text-left'>
          Ferum:
          <input
          max="99"
          type="number"
          value={title}
          onChange={e => setTitle(e.target.value)}
          placeholder='Ferum persentage'
          className='mt-1 text-white w-full rounded-lg bg-[#12191F] py-1 px-2'/>
        </label>
        <label className='text-xs text-white'>
          Sulfur:
          <input
          max="99"
          type="number"
          value={text}
          onChange={e => setText(e.target.value)}
          placeholder='Sulfur persentage'
          className='mt-1 text-white w-full rounded-lg bg-[#12191F] py-1 px-2'/>
        </label>
        <div className='flex gap-8 justify-center mt-4'>
          <button
          onClick={submitHandler}
          className='bg-[#12191F] flex justify-center items-center text-xs text-white rounded-lg py-2 px-4'
          >
            Submit
          </button>
        </div>
      </form>

      </div>
      <div className="chart-box  h-80 w-80">
          <Doughnut />
        </div>
        </div>
  )
} 

Answer 1

您没有将

title

和

text

值传递给

Doughnut

组件中的

OreComposition

组件。

<Doughnut post={{ title: title, text: text }} />

此外，React 组件将传入的属性视为对象。您应该应用解构函数来获取特定属性，如下所示：

export const DoughnutChartComponent = ({ post }) => {
  ...
};

演示@StackBlitz