在React中动态更新Highcharts图表 [英] Dynamically update Highcharts chart in react

问题描述

我正在react-redux中使用highcharts-react-official来创建明细表.

I am using highcharts-react-official in react-redux to create a drilldown chart.

但是，当我单击栏上的向下钻取时，我也会更新一些道具，这些道具会导致组件重新渲染-似乎阻止了向下钻取事件.

However when I click on a bar to drilldown, I also update some props which causes the component to re-render - which seems to prevent the drilldown event.

我从

I kind of gathered from Change series data dynamically in react-highcharts without re-render of the chart that I should use shouldComponentUpdate and getChart() to prevent re-render and instead dynamically update the data.

我的问题是getChart()对于正式的highcharts react包似乎不起作用.我收到了Uncaught TypeError:this.refs.chart.getChart不是一个函数

My issue is that getChart() doesn't seem to work for the official highcharts react package. I'm getting Uncaught TypeError: this.refs.chart.getChart is not a function

我是否打算使用另一种方法来获取和动态更新图表?还是我可以看的一些例子?

Is there an alternative I'm meant to be using to get and dynamically update the chart? Or some examples that I could look at?

此处仅包括render和shouldComponentUpdate部分:

Just including render and shouldComponentUpdate parts here:

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"
        />
    )
}

推荐答案

在highcharts-react-official v2.0.0中添加了allowChartUpdate选项，该选项在您的情况下效果很好.通过使用此选项，您可以通过更新组件来阻止更新图表:

In highcharts-react-official v2.0.0 has been added allowChartUpdate option, which should work great in your case. By using this option you can block updating the chart with updating the component:

categoryClicked() {
  this.allowChartUpdate = false;
  this.setState({
    ...
  });
}

...

  <HighchartsReact
    ref={"chartComponent"}
    allowChartUpdate={this.allowChartUpdate}
    highcharts={Highcharts}
    options={...}
  />

此外，要获取图表实例，请使用refs:

Moreover, to get the chart instance use refs:

componentDidMount(){
  const chart = this.refs.chartComponent.chart;
}

实时演示: https://codesandbox.io/s/98nl4pp5r4

这篇关于在React中动态更新Highcharts图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！