如何在图表的顶部有数据标签？ [英] How to have data labels on top of the graph?

问题描述

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

  dataLabels：{enabled：true} 
  

http://jsfiddle.net/gc8144kv/

我想将数据标签放在图表的顶部，而不是在行上。
查看示例（我只是使用Paint编辑器移动数据标签:)：
图表顶部的数据标签

我如何做到这一点？

解决方案

div>

我认为一个好主意是移动你的dataLabel在加载和重绘事件函数，因为你可能有你的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/

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.

解决方案

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/

这篇关于如何在图表的顶部有数据标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！