如何在图表顶部放置数据标签？答案

【问题标题】：How to have data labels on top of the graph?如何在图表顶部放置数据标签？
【发布时间】：2016-10-07 08:58:26
【问题描述】：

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

dataLabels: {enabled: true}

http://jsfiddle.net/gc8144kv/

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

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

谢谢。

【问题讨论】：

标签： javascript jquery graph charts highcharts

【解决方案1】：

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

在这里你可以看到可能对你有帮助的代码：

  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/

【讨论】：

【解决方案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 + ")");
});
});

【讨论】：

是的，这就是我想要做的。不幸的是，在调整数据标签的大小时，它们又回到了它们的初始位置：/ 非常感谢！