如何在圖表上添加數據標籤？

Question

我在這裏-下與數據標籤花鍵圖表的一個簡單的例子啓用：

dataLabels: {enabled: true} 

http://jsfiddle.net/gc8144kv/

我想有在圖的頂部，而不是在該行上的數據標籤。 看到這裏的例子（我剛剛用一個畫圖編輯器:)移動數據標籤）： Data labels on top of the graph

我該怎麼做？當我們調整窗口大小時，我們知道數據標籤應該有響應

謝謝。

Answer 1

我認爲好的想法是將您的dataLabels負載和重繪事件的功能，因爲你可能有你的dataLabels甚至上圖右位置調整即可。

在這裏你可以看到代碼，可以幫助你：

var positionLabels = function(chart) { 
    var series = chart.series[0], 
     dataLabelsGroup = series.dataLabelsGroup, 
     xVal; 
    Highcharts.each(dataLabelsGroup.element.children, function(d) { 
     xVal = (d.attributes.transform.value).substring((d.attributes.transform.value).indexOf('(') + 1, (d.attributes.transform.value).indexOf(',')); 
     $(d).attr('transform', 'translate(' + xVal + ',-20)') 
    }) 
    }; 

在這裏，你可以找到活生生的例子它如何工作的：http://jsfiddle.net/gc8144kv/7/

Answer 2

這是我的想法。 Take a look at the jsfiddle.

將圖表作爲s​​vg對象加載後執行此代碼。

$(function(){ 
var fixedYPos = -25; 
var extractXValue = function(value) { 
    var myString = value; 
    var myRegexp = /^translate\(([0-9]+)\,.*?\)$/g; 
    var match = myRegexp.exec(myString); 
    return match[1]; 
}; 
var $el = $("svg.highcharts-root .highcharts-data-label"); 
$el.each(function(index, value) { 
    var elTransformX = extractXValue($($el[index]).attr("transform")); 
    $($el[index]).attr("transform", "translate(" + elTransformX + "," + fixedYPos + ")"); 
}); 
});