8

我在 react-redux 中使用 highcharts-react-official 来创建明细图。

但是，当我单击一个栏进行向下钻取时，我还更新了一些导致组件重新渲染的道具——这似乎阻止了向下钻取事件。

我在 react-highcharts 中动态地从更改系列数据中收集，而无需重新渲染图表，我应该使用 shouldComponentUpdate 和 getChart() 来防止重新渲染，而是动态更新数据。

我的问题是 getChart() 似乎不适用于官方的 highcharts react 包。我收到 Uncaught TypeError: this.refs.chart.getChart is not a function

有没有我打算用来获取和动态更新图表的替代方法？或者一些我可以看的例子？

在这里只包括 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"
        />
    )
}
4

2 回答 2

6

Inhighcharts-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

于 2018-12-14T12:57:55.330 回答
-1 
// 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>


   )
}
于 2020-09-14T00:07:57.930 回答