如何在图表上方放置数据标签？

Question

我在这里 - 在一个简单的样条图表示例中启用了数据标签：

dataLabels: {enabled: true}

http://jsfiddle.net/gc8144kv/

我想将数据标签放在图表的顶部，而不是在线上。 请参阅此处的示例（我只是使用Paint编辑器移动数据标签:)）： Data labels on top of the graph

我该怎么做？知道在我们调整窗口大小时数据标签应该是响应的

感谢。

Answer 1

我认为好主意是在加载和重绘事件函数中移动dataLabel，因为即使在图表调整大小时，您的datababel也可能处于正确的位置。

在这里，您可以看到可能对您有用的代码：

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