Question

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

如果删除功能，则向下钻取有效，因此我怀疑我的功能覆盖了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>           
    );
}
}

兴趣线是 events: {click: this.showdetailsClick},位于plotOptions的config变量中

它会在我的组件中触发此功能

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事件上？

从3.0.8开始在添加新系列之前，单击向下钻取点时将触发。此事件还用于异步深入分析，其中seriesOptions不是按选项添加的，而是加载了异步的。请注意，在单击类别标签以触发多个系列的向下钻取时，类别中的每个点都会触发一个向下钻取事件。

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

在单击上用于饼图的反应高图，而不覆盖默认的onclick函数

1 个答案: