Javascript Highcharts变量饼图legendItemClick不隐藏或更新数据

我目前正在使用HighCharts变量饼图。我想为图例单击添加更多功能，因此我添加了一个单独的legendItemClick事件来执行两件事：它的行为应该与默认值类似（事实并非如此），但也要更正甜甜圈内的文本值，这也不起作用

下面是一些要使用的代码：

            this._chart = Highcharts.chart(this.$.chartsContainer, {
                title: {
                    text: '<div style="font-size: 30px; font-weight:600;">' + ySum + '</div><div>Total demands</div>',
                    align: 'center',
                    verticalAlign: 'middle',
                    useHTML: true,
                    style: {
                        'font-size': '16px',
                        'font-weight': 'normal',
                        'text-align': 'center',
                        'text-transform': 'inherit'
                    },
                    x: -2,
                    y: -27,
                },
                colors: ['#315674', '#006281', '#006D81', '#00BFE2', '#53A1B4', '#4FB4B5', '#00E8D2', '#FFC35F', '#9ECBD6'],
                plotOptions: {
                    series: {
                        dataLabels: {
                            enabled: false },
                        showInLegend: true,
                        style: {'border-radius': '15px', 'font-weight': 'normal'},

                    },
                    variablepie: {
                        name: '',
                        borderWidth: 5, borderColor: 'white', minPointSize: 16,
                        color: 'white', innerSize: '60%',
                        point: {
                            events: {
                                legendItemClick: function(event) {
                                    console.log(event);
                                    if (this.visible) {
                                       this.series.visible = false;
                                        ySum = ySum - event.target.options.y;
                                    } else {
                                        ySum = ySum + event.target.options.y;
                                    }
                                }
                            }
                        }
                    },
                },
                tooltip: {
                    useHTML: true,
                    headerFormat: '<small>{point.y}</small><table>',
                    pointFormat: '',
                    footerFormat: ''
                },
                series: [{
                    type: 'variablepie',
                    data: ySerie,
                },
                ]
            });
            this.reflowChart();

this.\u chart=Highcharts.chart（this.$.chartsContainer{
标题：{
文本：“”+ySum+“总需求”，
对齐：'居中'，
垂直排列：'中间'，
是的，
风格：{
“字体大小”：“16px”，
“字体大小”：“正常”，
“文本对齐”：“居中”，
“文本转换”：“继承”
},
x:-2，
y:-27，
},
颜色：[“315674”、“006281”、“006D81”、“00BFE2”、“53A1B4”、“4FB4B5”、“00E8D2”、“FFC35F”、“9ECBD6”]，
打印选项：{
系列：{
数据标签：{
已启用：false}，
showInLegend：是的，
样式：{'border-radius'：'15px'，'font-weight'：'normal'}，
},
可变的：{
名称：“”，
borderWidth:5，borderColor:“白色”，minPointSize:16，
颜色：“白色”，内部尺寸：“60%”，
要点：{
活动：{
legendItemClick:函数（事件）{
console.log（事件）；
如果（这个可见）{
this.series.visible=false；
ySum=ySum-event.target.options.y；
}否则{
ySum=ySum+event.target.options.y；
}
}
}
}
},
},
工具提示：{
是的，
headerFormat:“{point.y}”，
点格式：“”，
页脚格式：“”
},
系列：[{
类型：“variablepie”，
资料来源：伊瑟里，
},
]
});
这个.reflowChart（）；

我尝试通过其visible属性隐藏单击的系列数据，但这无法正常工作，因为它隐藏单击的数据，但不会重新绘制图表以再次形成一个完整的圆圈（如果您知道我在说什么）

第二个问题是文本标题。我希望它显示新的更正值（它是标题：{text:block内的ySum变量）。我尝试设置新值，但由于某些原因它不会更新图表的数据。例如，我们有3个值为10的切片。它显示“总计30”。当单击并隐藏1个图例项时，它应该更新ySum以显示“总计20”

总之，我需要你的帮助 1） 如何正确隐藏和显示单击的图例系列数据 2） 使文本属性ySum相应地更新其值

谢谢你的帮助

-------------------更新-----------------

我自己解决了第一个问题（如果有人面临这个问题，我会留下这个问题）： legendItemClick事件是一个可以返回布尔值的函数： 可以通过设置 true=标准行为->它将隐藏数据系列并重新绘制图表

---

false=它将不执行任何操作->类似于event.preventDefault（）

要更改图表标题，可以使用

setTitle

方法：

    legendItemClick: function(event) {
      var chart = this.series.chart

      if (this.visible) {
        // this.series.visible = false;
        ySum = ySum - event.target.options.y;
      } else {
        ySum = ySum + event.target.options.y;
      }
      chart.setTitle({
        text: ySum
      }, false, false);

      return true
    }

API参考：

---

现场演示：

效果非常好。非常感谢ppotaczek！：-）