Динамически обновлять график Highcharts в React
Я использую highcharts-react-official в react-redux для создания развернутой диаграммы.
Однако, когда я нажимаю на полосу для детализации, я также обновляю некоторые реквизиты, которые вызывают повторный рендеринг компонента, что, похоже, предотвращает событие детализации.
Я как бы понял из Динамическое изменение данных ряда в диаграммах с высоким уровнем реакции без повторного рендеринга диаграммы, что я должен использовать shouldComponentUpdate и getChart (), чтобы предотвратить повторный рендеринг и вместо этого динамически обновлять данные.
Моя проблема в том, что getChart (), похоже, не работает для официального пакета реакции highcharts. Я получаю ошибку Uncaught TypeError: this.refs.chart.getChart не является функцией
Есть ли альтернатива, которую я должен использовать для получения и динамического обновления диаграммы? Или несколько примеров, на которые я мог бы взглянуть?
Просто включая части render и shouldComponentUpdate сюда:
shouldComponentUpdate(nextProps, nextState) {
let chart = this.refs.chart.getChart();
//dynamically update data using nextProps
return false;
}
render () {
const options = {
chart: {
type: 'column',
height: 300,
events: {
drillup: (e) => {this.drilledUp(e)}
}
},
plotOptions: {
series: {
events:{
click: (e) => {this.categoryClicked(e)}
}
}
},
xAxis: {type: "category"},
yAxis: {title: {text: 'Amount Spent ($)'}},
series: [{
name: 'weekly spending',
showInLegend: false,
data: this.props.transactionChartData.series_data,
cursor: 'pointer',
events: {
click: (e)=> {this.weekSelected(e)}
}
}],
drilldown: {
series: this.props.transactionChartData.drilldown_data
}
};
return (
<HighchartsReact
highcharts = {Highcharts}
options = {options}
ref = "chart"
/>
)
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В highcharts-react-official v2.0.0 была добавлена опция allowChartUpdate, которая должна отлично работать в вашем случае. Используя эту опцию, вы можете заблокировать обновление диаграммы с обновлением компонента:
categoryClicked() {
this.allowChartUpdate = false;
this.setState({
...
});
}
...
<HighchartsReact
ref = {"chartComponent"}
allowChartUpdate = {this.allowChartUpdate}
highcharts = {Highcharts}
options = {...}
/>
Более того, чтобы получить экземпляр графика, используйте refs:
componentDidMount(){
const chart = this.refs.chartComponent.chart;
}
Живая демонстрация: https://codesandbox.io/s/98nl4pp5r4
ах, теперь, когда вы это написали, это так явно и в ридми. Спасибо!
// react native functional
import React, {useState, useRef,useLayoutEffect} from "react"
import HighchartsReactNative from '@highcharts/highcharts-react-native'
function chartcomponent(props){
const [options, setoptions] = useState({});
const chartRef = useRef(null);
useEffect(() => {
// create the options for your chart.
setoptions({chart:{}, yaxis:{}, xAxis:{},})// etc.
}, []);
useLayoutEffect(() => {
// new point to add, you can get new data via props, fetch, socket, etc.
var x = new Date(hr.timestamp).getTime();
var y = 10
// these are the important parts here:
var series = chartRef.current.props.options.series;
if (!Array.isArray(series)){return;}
var seriesdata = series[0].data;
seriesdata.push([x,y]);
// next line limits points in chart to 10, so new poitn replaces first point
if (seriesdata.length>10){seriesdata.splice(0,1);}
return () => {};
}, [props]);
return(
<View style = {styles.charting}><HighchartsReactNative styles = {{height:300, width:600}} options = {options} ref = {chartRef} ></HighchartsReactNative></View>
)
}
У меня была такая же проблема, это легко исправить вот так: stackoverflow.com/a/65821013/11302398