ハイチャート：データラベルをホバーの相対値（パーセンテージ）として表示

Question

ハイチャートソフトウェアを使用して、ホバー効果を持つ棒グラフを作成しようとしています。グラフは次のようになります。http://www.computerbase.de/2016-02/directx-12-benchmarks-ashes-of-the-singularity-beta/#diagramm-ashes-of-the-singularity-1920-1080

データラベルの値は、チャートをホバーするとパーセンテージに変化し、相対値が表示されます。

グラフ自体を作成することは問題ではありません。ただし、データラベルを変更するのは、どのようにすべてのデータラベルをループし、相対値を計算し、ラベルを更新できますか？ APIはあまり言わない。

$('#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

ポイントのmouseOverイベントに設定新しいラベルを持つデータとSeries.setData()を行うことが可能です。 dataLabelsformatオプションを使用すると、ラベルデータをポイントデータから取得し、keyをシリーズで設定してラベル情報を設定します。

例：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

あなたはこれを試すことがあります。

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

例： http://jsfiddle.net/jugal/zAGGT/