0

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

如果我删除我的函数，向下钻取工作，所以我怀疑我的函数覆盖了 react-highcharts 的默认 onclick。

以下代码在反应组件中

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 的配置变量中

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

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,
        })
    }

   }
}

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

4

1 回答 1

1

您是否尝试过将您的功能附加到drilldown事件中？

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

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

于 2018-07-23T20:40:54.717 回答