javascript - 使用饼图 React-highcharts 的 on click 而不覆盖默认的 onclick 函数

Question

我有一个来自react-highcharts的饼图。我目前正在尝试实现钻取功能。

如果我删除我的函数，Drilldown 就会起作用，所以我怀疑我的函数会覆盖react-highcharts 的默认 onclick。

以下代码位于react中的组件内

createPieChartData()
{
    var data = []
    var steps_array = this.steps

    var step
    for (step of steps_array)
    {
        let obj = {}
        obj.name = step.position + " " + step.short_name
        obj.y = parseInt(step.duration)
        obj.drilldown = (parseInt(step.position)-1).toString()
        data.push(obj)
    }

    let series = []
    let action
    let index = 0
    for(action of this.actions)
    {
        let obj = {}
        obj.name = "Step " + index + " Actions"
        obj.id = index.toString()

        obj.data = action.map(element => {
            return [element.action_name, (1/action.length)]
        })

        series.push(obj)
        index+=1
    }

    const config = {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie',
            height: 750
        },
        title: {
            text: 'Duration Breakdown'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                events: {
                    click: this.showdetailsClick.bind(this)
                },
                series: {
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}: {point.y:.1f}%'
                    }
                }
            },
        },
        series: [{
            name: 'Time',
            colorByPoint: true,
            data: data
        }],
        drilldown: {
            series: series
        }
    };

 createPieChart()
{
    return <ReactHighcharts  config = {this.createPieChartData()}></ReactHighcharts>
}

 render() {
    return (
        <div>

            <h1> Time Distribution </h1>
            <br />
            <br />
                {this.createPieChart()}
            <br/>

            {
                this.state.showdetails?
                <p> <p>{this.displayStepDetails(this.state.step_num)}</p> <br/> <h4>Actions</h4> {this.createTable(this.actions, this.state.step_num)} </p>
                :
                <div></div>
            }
            <br/>
            <br />
            <br />
                {this.createTimeSeries()}
            <br/>
                {}
        </div>           
    );
}
}

感兴趣的线是事件:{click:this.showdetailsClick}，位于plotOptions中的配置变量

它在我的组件中触发此函数

showdetailsClick (event) {

    console.log(event)
    if (this.state.showdetails == false)
  {
    this.setState({
    showdetails: true,
    step_num: event.point.index,
    })
  }
  else
  {
    if (event.point.index != this.state.step_num){
        this.setState({
            step_num: event.point.index,
            })
    }

    else {
        this.setState({
        showdetails: false,
        })
    }

   }
}

如果我注释掉此函数，则钻取将按预期工作，否则我的函数将被调用并按预期工作，但点击时不会发生钻取

Answer 1

您是否尝试过将函数附加到 drilldown 事件？

Since 3.0.8 Fires when a drilldown point is clicked, before the new series is added. This event is also utilized for async drilldown, where the seriesOptions are not added by option, but rather loaded async. Note that when clicking a category label to trigger multiple series drilldown, one drilldown event is triggered per point in the category.

https://api.highcharts.com/highcharts/chart.events.drilldown