如何更改 highcharts 中图例项的事件（悬停和单击）？

Question

如果您将鼠标悬停在图表点上，您可以在饼图中心看到点值。 如果您停止悬停图表点，您也可以看到总价值。 如果您悬停在图例项目上，它会喜欢同样的行为。

const chart = Highcharts.chart('container', {
  chart: {
    type: 'pie',
    events: {
        load: function(){
            this.title.attr({text: this.series[0].total});
        },
      render: function() {
        this.series && this.title.attr({y: this.plotHeight / 2 + this.plotTop + 5});
      }
    }
  },
  title: {
    text: ''
  },
  legend: {
    enabled: true,
  },
  plotOptions: {
    pie: {
    showInLegend: true,
      innerSize: '50%',
      dataLabels: {
        enabled: false
      },
      point: {
        events: {
          mouseOver: function() {
            this.series.chart.title.attr({text: this.y});
          },
          mouseOut: function(){
            this.series.chart.title.attr({text: this.total});
          },
        }
      }
    }
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
      name: 'Microsoft Internet Explorer',
      y: 56.33
    }, {
      name: 'Chrome',
      y: 24.03,
    }, {
      name: 'Firefox',
      y: 10.38
    }]
  }]
});

https://jsfiddle.net/q5fh1nog/24/

我还希望单击活动图例项将重新计算总值并将其显示在中心

Answer 1

您可以在图例的元素上添加mouseover和mouseout事件侦听器，并以与点的事件侦听器相同的方式更新标题。 例如：

  chart: {
    type: 'pie',
    events: {
      load: function() {
        const series = this.series[0];
        this.title.attr({
          text: this.series[0].total
        });

        series.points.forEach(point => {
          ['label', 'symbol'].forEach(prop => {
            point.legendItem[prop].on('mouseover', () => {
              series.chart.title.attr({
                text: point.y
              });
            });

            point.legendItem[prop].on('mouseout', () => {
              series.chart.title.attr({
                text: point.total
              });
            });
          });
        });
      },
      ...
    }
  }

---

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

API 参考： https ://api.highcharts.com/class-reference/Highcharts.SVGElement#on