Highcharts - wie man mehrere Datenetiketten auf mouseOver und mouseOut zeigt

Question

ich möchte Datenbeschriftungen nur auf mousehover zeigen. unten ist der Code, den ich versucht, aber seine Arbeit mit der Maus darüber in Ordnung, aber versteckt nur ein auf mouseOut .. jsfiddle hier isthttp://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", 
          }); 
         } 
        } 
       } 
      } 
     } 
    }); 
}); 

bitte die js Geige hier http://jsfiddle.net/wbmu4sat/5/

Answer 1

Sie können point.update() finden verwenden Aktivieren/Deaktivieren der Datenbeschriftung eines Punkts Bei MouseOver können Sie die Punkte durchlaufen und die Datenbeschriftungen für alle deaktivieren, mit Ausnahme der verschobenen Punkte.

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

Beispiel: http://jsfiddle.net/vtgbmas7/