How to have data labels on top of the graph?

问题:

I have here-under a simple example of spline chart with data label enabled :

dataLabels: {enabled: true}

http://jsfiddle.net/gc8144kv/

I would like to have the data labels on top of the graph instead of on the line. See example here (i just moved the data label with a Paint editor :) ) : Data labels on top of the graph

How can I do this ? knowing that the data labels should be responsive when we resize the window

Thanks.

回答1:

I think that good idea is to move your dataLabels in load and redraw events functions, because you may have your dataLabels in the right positions even on chart resize then.

Here you can see the code that may help you:

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

And here you can find live example how it can work: http://jsfiddle.net/gc8144kv/7/

回答2:

Here is my idea. Take a look at the jsfiddle.

Execute this code once the chart has been loaded as an svg object.

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