Динамически обновлять график Highcharts в ответ

Question

Я использую Highcharts-реагировать-чиновник в реагировать-редукса для создания диаграммы детализации.

Однако, когда я нажимаю на панель для детализации, я также обновляю некоторые реквизиты, что вызывает повторную визуализацию компонента- что, по-видимому, предотвращает событие детализации.

Я как бы собрал данные из Динамически изменяйте данные ряда в реактивно-высоких диаграммах без повторного рендеринга диаграммы , которую я должен использовать mustComponentUpdate и 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"
        />
    )
}

Answer 1

В 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