Highcharts: zeigen Datenbeschriftungen als relativen Wert (Prozent) auf Hover

Question

Ich versuche, ein Balkendiagramm mit einem Hover-Effekt mit Highcharts-Software zu erstellen. Das Diagramm sollte folgendermaßen aussehen: http://www.computerbase.de/2016-02/directx-12-benchmarks-ashes-of-the-singularity-beta/#diagramm-ashes-of-the-singularity-1920-1080

Wie Sie sehen können, ändern sich die Datenbeschriftungswerte in Prozent, sobald Sie das Diagramm schweben und die relativen Werte anzeigen.

Das Erstellen des Diagramms selbst ist nicht das Problem. Das Ändern der Datenbeschriftungen ist jedoch. Wie kann ich alle Datenbeschriftungen durchlaufen, den relativen Wert berechnen und die Beschriftungen aktualisieren? Die API sagt nicht viel.

$('#container').highcharts({ 
    chart: { 
     type: 'bar' 
    }, 
    plotOptions: { 
     bar: { 
      dataLabels: { 
       enabled: true 
      } 
     }, 
     series: { 
      point: { 
       events: { 
        mouseOver: function() { 
         // change text of all data labels 
         console.log(this); 
         console.log(this.chart); 
        } 
       } 
      } 
     } 
    } 
}); 

Answer 1

Es ist möglich Series.setData() mit Daten zu tun, die neuen Etiketten auf mouseOver Fall Punkt gesetzt hat. Verwenden Sie dataLabelsformat Option, um Etiketten aus Punktdaten und key Einstellung in Ihrer Serie zu erhalten, Etiketteninfo festzulegen.

Beispiel: http://jsfiddle.net/pov2dt0q/

$(function() { 
    var startingData = [ 
     [1, '1'], 
     [2, '2'], 
     [3, '3'] 
    ], 
    percentData = [ 
     [ 
     [1, 'x 100%'], 
     [2, '200%'], 
     [3, '300%'] 
     ], 
     [ 
     [1, '50%'], 
     [2, 'x 100%'], 
     [3, '150%'] 
     ], 
     [ 
     [1, '33%'], 
     [2, '66%'], 
     [3, 'x 100%'] 
     ] 
    ]; 
    $('#container').highcharts({ 
    series: [{ 
     type: 'bar', 
     dataLabels: { 
     enabled: true, 
     inside: true, 
     align: 'right', 
     x: -5, 
     format: '{point.label}' 
     }, 
     data: $.extend([], startingData), 
     keys: ['y', 'label'], 
     point: { 
     events: { 
      mouseOver: function() { 
      this.series.setData(percentData[this.x]); 
      }, 
      mouseOut: function() { 
      this.series.setData(startingData); 
      } 
     } 
     } 
    }] 
    }); 
}); 

Answer 2

Sie können dies versuchen:

chart.tooltip.options.formatter = function() { 
    var xyArr=[]; 
    $.each(this.points,function(){ 
     xyArr.push('Serie: ' + this.series.name + ', ' +'X: ' + this.x + ', Y: ' +this.y); 
    }); 
    return xyArr.join('<br/>'); 
} 

Beispiel: http://jsfiddle.net/jugal/zAGGT/