高图表变量饼图例项单击不隐藏或更新数据

Question

我目前正在使用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();

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

第二个问题是文本标题。我希望它显示新的更正值(它是标题内的 ySum 变量：{ 文本：块(。我尝试设置新值，但由于某种原因它没有更新图表的数据。例如，我们有 3 个切片，每个切片的值为 10。它显示"总共 30 个"。当单击并隐藏 1 个图例项时，它应该更新 ySum 以现在显示"总共 20 个"。

所以简而言之，我需要帮助 1(如何正确隐藏和显示点击的图例系列数据 2( 使文本属性 ySum 相应地更新其值

感谢您的帮助！

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

我自己解决了第一个问题(如果其他人遇到这个问题，我会离开这个问题(： legendItemClick 事件是一个可以返回布尔值的函数： 您可以通过设置 true = 标准行为 ->它将隐藏数据系列并重绘图表 false = 它什么都不做 ->类似于 event.preventDefault((

Answer 1

要更改图表标题，您可以使用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 参考：https://api.highcharts.com/class-reference/Highcharts.Chart#setTitle

现场演示：https://jsfiddle.net/BlackLabel/sdh1y0tw/