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

Question

i want to show data labels only on mousehover. below is the code i tried but its working fine on mouseOver But hiding only one on mouseOut.. jsfiddle is here 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",
                            });
                        }
                    }
                }
           }
        }
    });
});

please find the js fiddle here http://jsfiddle.net/wbmu4sat/5/

Answer 1

You can use point.update() to enable/disable a point's data label. On mouseover you can loop through the points and disable data labels for all of them, except the hovered points.

        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
            }
          });
        }
      }
    }

example: http://jsfiddle.net/vtgbmas7/