我想为 highcharts 过滤我的数据。我真正想要实现的是将 Highstock rangeSelector
功能应用于所有其他 highcharts 模块,如词云、饼图等。只要我点击 highstock 的 1m
选项, 它也会过滤其他图表的 一个月
范围内的数据。
我找不到解决这个问题的方法,所以我想到了另一种方法,即定义自定义过滤器按钮,如 1m、1d 和 1y
,并在 Click 事件中获取图表数据这些按钮。
这是我的代码: https://stackblitz.com/edit/react-zvtkjo
我正在使用 button.js 文件中的函数获取数据,并将数据作为 Prop 传递给两个图表:highstock 和 wordcloud,以便单击该按钮时,数据会传递给这些图表。但是图表呈现为空。
请帮忙解决
最佳答案
您必须将 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
关于javascript - 数据过滤 React Highcharts,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55901969/