javascript - 数据过滤 React Highcharts

Question

我想为 highcharts 过滤我的数据。我真正想要实现的是将 Highstock rangeSelector 功能应用于所有其他 highcharts 模块，如词云、饼图等。只要我点击 highstock 的 1m 选项, 它也会过滤其他图表的 一个月 范围内的数据。

我找不到解决这个问题的方法，所以我想到了另一种方法，即定义自定义过滤器按钮，如 1m、1d 和 1y，并在 Click 事件中获取图表数据这些按钮。

这是我的代码: https://stackblitz.com/edit/react-zvtkjo

我正在使用 button.js 文件中的函数获取数据，并将数据作为 Prop 传递给两个图表:highstock 和 wordcloud，以便单击该按钮时，数据会传递给这些图表。但是图表呈现为空。

请帮忙解决

Answer 1

您必须将 data1: data1 设置为 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