グラフの上にデータラベルを付けるにはどうすればいいですか？

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.

グラフがsvgオブジェクトとして読み込まれたら、このコードを実行します。

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