Highcharts - 如何在 mouseOver 和 mouseOut 上显示/隐藏多个数据标签

Question

我只想在鼠标悬停时显示数据标签。 下面是我尝试过的代码，但它在 mouseOver 上工作正常但在 mouseOut 上只隐藏一个。 jsfiddle 来了 http://jsfiddle.net/wbmu4sat/5/

$(function () {
    Highcharts.chart('container', {
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            crosshair: {
                color: '#eaeaea'
            }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        }, {
            data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
        }],
                tooltip: {
            shared: true
        },
        plotOptions: {
            series: {
              dataLabels: {
                  enabled: true,
                  align: 'center',
                  style: {fontSize: '0px' },
                states: {
                  hover: {
                  enabled: true,
                  }
                }
              },
              marker: {
                radius: 10,
                symbol: 'circle',
                states: {
                  hover: {
                    radius: 20,
                    symbol: 'circle'
                  }
                }
              },
                point: {
                    events: {
                        mouseOut: function (e) {
                            this.dataLabel.css({
                                fontSize: "0px",
                            });
                        },
                        mouseOver: function (e) {
                            this.dataLabel.css({
                                fontSize: "10px",
                            });
                        }
                    }
                }
           }
        }
    });
});

请在这里找到 js fiddle http://jsfiddle.net/wbmu4sat/5/

Answer 1

您可以使用point.update() 启用/禁用点的数据标签。在鼠标悬停时，您可以遍历这些点并禁用所有这些点的数据标签，但悬停的点除外。

        events: {
      mouseOut: function() {
        this.chart.hoverPoints.forEach(p => {
          p.update({
            dataLabels: {
              enabled: false
            }
          }, false, false);
        });
      }
    },
    point: {
      events: {
        mouseOver: function(e) {
          this.series.data.forEach(p => {
            p.update({
              dataLabels: {
                enabled: false
              }
            }, false, false)
          });

          this.update({
            dataLabels: {
              enabled: true
            }
          });
        }
      }
    }

示例：http://jsfiddle.net/vtgbmas7/