Highcharts-react堆积图未正确更新系列

问题描述

我在使用 highcharts-react 更改堆积条形图的系列数据时遇到问题 我想做的是：我制作了一个堆积条形图，我有 3 个按钮用于根据按钮点击过滤数据。

    const dropoutByEthnicityOptions = {
            chart: {
                type: 'bar',style: {
                    fontFamily: 'HelveticaNowText-Regular',color: "#607D8B"
                },height: $(window).width() > 991 ? 450 : 350
            },title: {
                text: 'Dropout by Ethnicity',align: 'left',},xAxis: {
                categories: ['Albanian','Serbian','Turkish','Bosnian','Gorani','Ashkali','Roma','Egyptian'],labels: {
                    style: {
                        color: '#607D8B',fontSize: '14px'
                    }
                }
            },yAxis: {
                min: 0,title: {
                    text: null
                }
            },legend: {
                reversed: true,align: 'right',verticalAlign: 'top',floating: true
            },tooltip: {
                valueSuffix: undefined
            },plotOptions: {
                series: {
                    stacking: 'normal',pointWidth: 20
                }
            },colors: ['#2CD9C5','#60F1C8','#A4F7CC','#D7FBE8'],series: this.state.showBasedOnGenderClicked ? this.state.genderData : this.state.totalStudents
        };

        const dropoutByGradeOptions = {
            chart: {
                type: 'bar',height: $(window).width() > 991 ? 500 : 400
            },title: {
                text: 'Dropout by Grade',xAxis: {
                categories: ['Grade 1','Grade 2','Grade 3','Grade 4','Grade 5','Grade 6','Grade 7','Grade 8','Freshman','Sophomore','Junior','Senior','13th Grade'],tooltip: {
                valueSuffix: '%'
            },colors: ['#426660','#2a4d48','#225c55','#32968b','#2ca89a','#24bdab','#1bdec7','#0afce0'],series: this.state.dropoutByGrade
        };

我打电话给 Highcharts：

{!this.state.totalDropoutByGradeClicked ? 
<div>
    <HighchartsReact highcharts={Highcharts} options={dropoutByEthnicityOptions} />
</div>
:
<div>
    <HighchartsReact highcharts={Highcharts} options={dropoutByGradeOptions} />
</div> }

问题是，当我第一次点击按钮时，系列数据是正确的，但在我第二次点击其中一个按钮后，数据没有正确改变。 >

这是我在按钮点击时为系列数据设置状态的代码：

<div className="filter-Box">
    <button class={this.state.totalDropoutByGradeClicked ? "active" : ""} onClick={this.onDropoutGradesClicked}>Total Dropout by grade</button>
    <button class={this.state.totalStudentsByEthnicityClicked ? "active" : ""} onClick={this.onTotalStudentsClicked}>Total Students by ethnicity</button>
    <button class={this.state.showBasedOnGenderClicked ? "active" : ""} onClick={this.onGenderClicked}>Dropouts by Gender & Ethnicity</button>
</div>

    onDropoutGradesClicked = () => {
        this.setState({
            totalDropoutByGradeClicked: true,totalStudentsByEthnicityClicked: false,showBasedOnGenderClicked: false,})
    }

    onGenderClicked = () => {
        this.setState({
            data: this.state.genderData,totalDropoutByGradeClicked: false,showBasedOnGenderClicked: true
        });
    }

    onTotalStudentsClicked = () => {
        this.setState({
            data: this.state.totalStudents,totalStudentsByEthnicityClicked: true,showBasedOnGenderClicked: false
        });
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）