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

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

dataLabels: {enabled: true} 

http://jsfiddle.net/gc8144kv/

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

我怎样才能做到这一点 ？ 知道在调整窗口大小时数据标签应该是响应的

谢谢。

Answer 1

我认为好主意是在加载和重绘事件函数中移动dataLabel，因为即使在图表resize时，您也可能将dataLabel放在正确的位置。

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

  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

这是我的想法。 看看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 + ")"); }); });