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

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 变量：{ text: block ）。我尝试设置新值，但由于某种原因它没有更新图表的数据。例如，我们有 3 个切片，每个切片的值为 10。它显示“总共30”。单击并隐藏 1 个图例项时，它应该更新 ySum 以显示“总共 20 个”。

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

感谢您的帮助！

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

我自己解决了第一个问题（如果有人遇到它，我仍然会留下这个问题）： legendItemClick 事件是一个可以 return 布尔值的函数：您可以通过设置来操纵它的行为 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/

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

Highcharts variable pie legendItemClick does not hide or update data

javascript

events

highcharts

pie-chart