Как я могу получить данные из URL-адреса API в мою круговую диаграмму reactgoogle в reactjs
Здесь я хочу получить данные из URL-адреса REST API, которые будут загружены в круговую диаграмму, а не вручную вводить данные, как показано на круговой диаграмме ниже.
URL-адрес API будет иметь ответ в формате JSON.
бывший:
[{"Этап разработки: 1," № проекта: 60}, {"Этап разработки: 2", № проекта: 50}]
Я хочу отображать данные на основе JSON.
<Chart
width = {'450px'}
height = {'310px'}
chartType = "PieChart"
loader = {<div>Loading Chart</div>}
data = {[
['Development Stages', 'Number of Project'],
['Stage 1', 60 ],
['Stage 2',40],
['Stage 3',20 ],
['Stage 4',10],
['Stage 5', 30],
]}
options = {{
title: 'Projects',
}}
rootProps = {{ 'data-testid': '1' }}
/>
Как я могу использовать асинхронные аксиомы для того же ???? и передайте его в диаграмму.
const [stage,setStage]=useState([]);
const getStageData = async() => {
try{
const data=await axios.get(APIurl
);
setStage(data.data)
}
catch(e){
}
};
useEffect(()=> {
getStageData();
},[]);
Я использую библиотеку диаграмм reactgoogle
@ksa, можешь мне помочь?
пожалуйста, войдите в консоль "stage" и дайте мне знать, что вы видите? поделитесь этим выводом здесь.
@ksa Да, я отредактировал сообщение, вы можете увидеть изображения журнала там. Я думаю, что переменная stage пуста.
ты уверен, что он пустой? если да, то убедитесь, что у сцены есть ответ JSON, который вы упомянули выше. что вы видите, когда консоль журнала "data.data"? это пусто? если он не пуст, выполните setStage (... stage, data.data), а затем в компоненте диаграммы сделайте data = {[stage]}. Не уверен, что это поможет вам, но попробуйте.
setStage (.data.data), здесь нет необходимости в операторе распространения.
@ksa Чтобы преобразовать мой массив объектов в массивы, я использовал карту (Object.values) в качестве решения, приведенного ниже, а затем после того, как диаграмма принимает соответствующий формат данных. Если я не конвертирую в массив с помощью карты, setStage (data.data) дает мне объект json. Но для отображения в формате массива мне нужно использовать карту, но ее применение дает мне пустой setStage ()
@ksa const [этап, setStage] = useState ([]); const getStageData = async () => {попробуйте {const data1 = await axios.get ("url"); setStage (data1.data); } catch (e) {}}; useEffect (() => {getStageData ();}, []); stage.map (Object.values) Вот как выглядит мой код, и, возможно, это ... stage
Пожалуйста, поправьте меня, если я ошибаюсь. Из вашего кода я вижу, что вы сначала установили ответ axios (setStage (data1.data)), а затем вы конвертируете в массивы, используя stage. карта (Объект. значения). Попробуйте сначала сопоставить, а затем установите состояние и посмотрите. что-то вроде этого const res = data1.data.map (obejct.values), а затем setStage (res).
@ksa да, я пробовал с моим решением, данные загружались в значительной степени так же, как вы сказали. Еще раз спасибо, так как я новичок в реакции и знаю только основы javascript, я застрял на нем, еще раз спасибо !!!
Не волнуйтесь. Работает?
@ksa Да, это так. !!
Я отправил это как ответ. Пожалуйста, примите это. Спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
<Chart width = {'450px'} height = {'310px'} chartType = "PieChart" loader = {Loading Chart} data = {[['Этапы разработки', 'Количество проектов'], ... этап]} options = {{title: 'Projects',}} rootProps = {{'data-testid': '1'}} />
После этого круговая диаграмма также становится пустой.
Итак, данные, которые вы должны передать на круговую диаграмму, должны быть массивом массивов (в зависимости от библиотеки, которую вы используете). Данные вашего ответа выглядят как массив объектов.
- Преобразуйте ваши данные в массив массивов.
setStage(reponse.data.map(Object.values));
- Передайте эти данные в круговую диаграмму.
<Chart
...otherProps
data = {[
['Development Stages', 'Number of Project'],
...data
]}
/>
Здесь этап преобразуется в массив массива, но с помощью оператора распространения он не отображается на графике.
Из вашего кода я вижу, что вы сначала установили ответ axios (setStage(data1.data)), а затем вы конвертируете в массивы с помощью stage.map(Object. values). Попробуйте сначала сопоставить, а затем установите состояние и посмотрите. что-то вроде этого const res = data1.data.map(obejct.values), а затем setStage(res).
Полный рабочий код для использования response-google Piechart вместе с вызовом данных rest api
const [stage,setStage]=useState([]);
const getStageData = async() =>
{
try{
const data1=await axios.get("REST_API");
//converting array of objects into array
const res=data1.data.map(Object.values);
//setting it to stage variable
setStage(res);
}
catch(e){}
};
useEffect(()=> {
getStageData();
},[]);
<Chart
width = {'500px'}
height = {'310px'}
chartType = "PieChart"
loader = {<div>Loading Chart</div>}
data = {[
["COLUMN_NAME_1","COLUMN_NAME_2"],
...stage
]}
options = {{
title: 'Ongoing Projects Development Stage',
}}
rootProps = {{ 'data-testid': '1'}}
/>
Вы используете библиотеку chart.js?