Images actives - comment afficher/masquer plusieurs étiquettes de données sur mouseOver et mouseOut

Question

Je veux afficher les étiquettes de données uniquement sur mousehover. ci-dessous est le code j'ai essayé mais son fonctionne bien sur mouseOver Mais cacher une seule sur mouseOut .. jsFiddle est icihttp://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", 
          }); 
         } 
        } 
       } 
      } 
     } 
    }); 
}); 

s'il vous plaît trouver le violon js ici http://jsfiddle.net/wbmu4sat/5/

Answer 1

Vous pouvez utiliser point.update() activer/désactiver l'étiquette de données d'un point. Au passage de la souris, vous pouvez faire défiler les points et désactiver les étiquettes de données pour chacun d'entre eux, à l'exception des points survolés.

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

exemple: http://jsfiddle.net/vtgbmas7/