Highcharts：將數據標籤顯示爲懸停時的相對值（百分比）

我正嘗試使用Highcharts軟件創建具有懸停效果的條形圖。圖表應該如下所示：http://www.computerbase.de/2016-02/directx-12-benchmarks-ashes-of-the-singularity-beta/#diagramm-ashes-of-the-singularity-1920-1080 Highcharts：將數據標籤顯示爲懸停時的相對值（百分比）

正如您所看到的，一旦將鼠標懸停在圖表上，數據標籤值就會變成百分比，並顯示相對值。

創建圖表本身不是問題。但是更改數據標籤是。我如何遍歷所有數據標籤，計算相對值並更新標籤？ 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); 
        } 
       } 
      } 
     } 
    } 
});

來源

2016-05-17 xwb

真的看起來像一個[吸血鬼提問]（http://slash7.com/2006/12/22/vampires/）給我..你嘗試過什麼了嗎？ –

在API中找不到任何內容。我也做了'console.log（this）;'並查看了圖表對象中的方法，但沒有任何內容可以訪問所有數據標籤。 – xwb

這是可以做到Series.setData()，具有在mouseOver事件點的設置新的標籤數據。使用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); 
      } 
     } 
     } 
    }] 
    }); 
});

來源

2016-05-19 10:29:07

正是我在找什麼，謝謝！ – xwb

你可以試試這個：

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/

來源

2016-05-17 11:52:03 Krishnakant

Highcharts：將數據標籤顯示爲懸停時的相對值（百分比）

回答

相關問題