#reactjs #highcharts #axios
#reactjs #highcharts #axios
Вопрос:
Я пытаюсь использовать highcharts
модуль (однострочный ряд highstock) с React. Я попытался извлечь данные из URL, используя axios
, но данные не отображаются на графике.
Вот фрагмент моей функции для передачи данных:
series: [
{ name: 'Counts',
data: (function() {
axios.get('https://www.highcharts.com/samples/data/aapl-c.json')
.then(res => {
console.log(res.data, 'data fetched');
return res.data;
})
.catch(err => {
return err;
})
}()),
tooltip: {
valueDecimals: 2
}
}
],
Я также пытался извлекать данные в методе жизненного цикла компонента « componentDidMount
, но не смог получить результат из метода и передать его в ключ данных серии. Помощь приветствуется.
Комментарии:
1. Привет @bubble-cord, ваша проблема решена или вам все еще нужна помощь?
2. @ppotaczek Это было решено. Спасибо.
Ответ №1:
Здесь есть 2 проблемы, сначала вам нужно вернуть что-то из вашей IIFE:
(function() {
return axios.get('https://www.highcharts.com/samples/data/aapl-c.json') // you're missing return here
.then(res => {
console.log(res.data, 'data fetched');
return res.data;
})
.catch(err => {
return err;
})
}())
Но если вы попытаетесь присвоить этот IIFE переменной, вы увидите, что она возвращает обещание, которое по-прежнему не то, что вам нужно, вам нужно разрешенное значение из обещания.
Я предлагаю использовать async/await
в ваших componentDidMount
и setState
с выбранными данными. Вот так:
в вашем состоянии:
this.state = {
data: [],
}
в componentDidMount
:
async componentDidMount(){
let data = await axios.get('https://www.highcharts.com/samples/data/aapl-c.json')
.then(res => res.data)
.catch(err => {
return err;
})
this.setState({data})
}
Таким образом, вы будете устанавливать данные в state
ответ на вызов
, и в вашем рендеринге вы можете использовать
series: [
{ name: 'Counts',
data: this.state.data,
tooltip: {
valueDecimals: 2
}
}
],
Комментарии:
1. @bubble-cord Рад, что это сработало, не стесняйтесь отмечать его как ответ.
2. Существует ли какой-либо конкретный формат API, который необходимо использовать для выборки данных? Я попытался изменить свой API, а затем снова график становится пустым, но данные отображаются только в консоли.
3. как вы отображаете данные? Можете ли вы настроить codesandbox.io/s/y2lrywpk21
4. Я думаю, это из-за формата, в котором вы получаете данные, это массив с массивами. Highcharts ожидает массив с числами:
[1,2,3,3,4]
; вы отправляете[[1554901500, 2], [1554901620, 5], [1554901740, 9]....]
. Измените данные на интерфейсе бэкэнда, и это сработает.5. Я отправляю значения для координат [x, y] в форме [[1554901500, 2], [1554901620, 5], [1554901740, 9]….], где первая единица обозначает время эпохи, а вторая — количество данных, связанных в это время.