Highcharts 饼图：如何忽略禁用的图例项

Question

请看这个JSFiddle。

在此示例中，您可以在左上角看到所有值的总和。

如果您点击任何图例项，它将被禁用，但总值不会反映它。文本应更新为不包括该禁用的项目。我该怎么做？

Answer 1

您可以使用 legendItemClick 事件通过保留对 Element 的引用来更新呈现的文本。例如：

var totalText;

var chart = new Highcharts.Chart({
    chart: {
        events: {
            load: function(event) {
                totalText = this.renderer.text(
                    'Total: ' + total,
                    this.plotLeft,
                    this.plotTop - 20
                ).attr({
                    zIndex: 5
                }).add()
            }
        }
    }

    //...

    plotOptions: {
        pie: {
            point: {
                events: {
                    legendItemClick: function(e) {
                        var newTotal = this.series.total + (this.visible ? -this.y : this.y);
                        totalText.attr({ text: 'Total: '+newTotal });
                    }
                }
            }
        }
    }
});

请参阅 this updated JSFiddle 进行演示。

Answer 2

虽然 Ondkloss 的回答很好。但我找到了一个更简单的解决方案，使用重绘事件而不是加载。 JSFiddle

Highcharts 饼图：如何忽略禁用的图例项

Highcharts Pie Chart: How to ignore disabled legend items

javascript

highcharts

pie-chart