Блог

Я создаю простой веб-сайт, используя React и node js. Я загружаю данные из своего хранилища данных mongo db. И я использую дизайн муравьев, чтобы нарисовать график на своем веб-сайте.

Я пытаюсь нарисовать график @ant-design/charts на основе и из образца, для которого требуются данные, как показано ниже.

 import React from 'react';
import { Line } from '@ant-design/charts';
const Page: React.FC = () => {
  const data = [
    { year: '1991', value1: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 13 },
  ];
  const config = {
    data,
    height: 400,
    xField: 'year',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
    label: {
      style: {
        fill: '#aaa',
      },
    },
  };
  return <Line {...config} />;
};
export default Page;
 

Данные, которые я хочу загрузить, приведены ниже.

Я успешно загрузил данные, но мне не удалось отобразить их на веб-сайте. Вот мой вопрос, как я могу сформировать свои загруженные данные, которые являются массивом, в виде того, что дизайн ant хочет, чтобы я сделал так…?

Это код, который я использовал для загрузки данных из базы данных mongo.

   const [ readPageList, setReadPageList ] = useState([]);
  var bookId = "60219f2a03fdf00d5cf4051d" 

  useEffect(()=>{
    axios.get('/api/books/GetBookById/' bookId)
    .then( response => {
      setReadPageList(response.data.book.dailyPage);
    })
  },[])

  const dataList = readPageList.map((pages,index) => {
    return [JSON.stringify({year:index, value:pages.readPage})]


  })
 

Поэтому я стараюсь использовать dataList вместо данных в графе дизайна муравьев

Спасибо

Сначала вы проверяете, какой тип данных они для этого могут быть использованы:

 console.log(typeof data)
 

если он отображает строку, вы можете преобразовать ее в объект, просто написав:

 JSON.parse(data) // it will convert data to object
 

если нет, вы можете попытаться преобразовать его в строку и преобразовать обратно в объект, как показано ниже:

 JSON.parse(JSON.stringify(data))
 

Может быть, вы можете написать код ниже:

 ...
if ( typeof data === `string` )
   data = JSON.parse(data)
...