Question

我想过滤我的数据以查看高图。我要实现的目标是将Highstock rangeSelector功能应用于所有其他图表，如词云，饼图等。一旦我单击highstock的1m选项，它就会过滤掉其中的数据one month其他图表的范围也是如此。

我无法找到一种解决方法，因此我想到了另一种方法，是定义自定义过滤器按钮（如1m, 1d and 1y，并在这些按钮的Click事件上获取图表数据。

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

我正在使用button.js文件中的函数获取数据，并将数据作为道具传递给两个图表：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

数据过滤React Highcharts

1 个答案: