如何更改 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