Фильтрация данных React Highcharts

Question

Я хочу отфильтровать свои данные для высоких графиков.Что именно я пытаюсь достичь, так это применить функциональность Highstock rangeSelector ко всем другим модулям высоких диаграмм, таким как облако слов, круговая диаграмма и т. Д. Как только я нажимаю на опцию 1m Highstock, она фильтрует данные в диапазоне one monthдругих графиков тоже.

Я не мог найти обходной путь для одной из них, поэтому я подумал о другом способе - определить пользовательские кнопки фильтра, такие как 1m, 1d and 1y, и извлечь данные для диаграмм по событию Click этих кнопок.

Вот мой код: https://stackblitz.com/edit/react-zvtkjo

Я извлекаю данные с помощью функции из файла button.js и передаю данные в виде реквизитов на две диаграммы: highstock и wordcloud, так что onClick этогоКнопка, данные передаются на эти графики.Но графики становятся пустыми.

Пожалуйста, помогите решить эту проблему.

Answer 1

Вы должны установить data1: data1 insted из data1: this.data1. Кроме того, вам не нужно использовать JSON.parse метод. Пожалуйста, обратитесь к коду ниже:

class Button extends Component{
    constructor(){
        super();
        this.state = {
            data1: [],
            data2: []
        }
    }

    getData = async () => {
        var res = await axios.get('https://api.myjson.com/bins/ybp8o');
        var data1 = res.data;
        data1 = data1.map(key => [key[0]*1000, key[1]]); 


        var res2 = await axios.get('https://api.myjson.com/bins/f499k');
        var data2 = res2.data;

        this.setState({
            data1: data1,
            data2: data2
        })
    }

    render(){
        return(
            <div>
                <button className="year" onClick={this.getData}>1 year</button>
                <Timeline ye={this.state.data1} />
                <Word ne={this.state.data2} />
            </div>
        )
    }
}

Демо: https://stackblitz.com/edit/react-6wxjn1?file=button.js