如何在图表上添加数据标签？

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