如何在标签Highcharts中设置“ Y”位置

Question

我试图更改标签的位置，如果它大于267，则将其放置在该点的上方，如果它低于该点，但是在格式化程序功能中无法这样做。

我目前实现了该目标，但是还没有通过编程实现。

我要编程的是尽可能类似于以下内容的图形：

如果可以帮助我，非常感谢。

var char = new Highcharts.chart('container', {
  chart: {
    zoomType: 'x'
  },
  title: {
    text: 'Title'
  },

  subtitle: {
    text: 'Subtitle'
  },
  xAxis: {
    title: {
      text: 'Title'
    }
  },
  yAxis: {
    title: {
      text: 'Subtitle'
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  plotOptions: {
    spline: {
      dataLabels: {
        enabled: true,
        formatter: function() {},
      }
    },
    series: {
      label: {
        connectorAllowed: false
      },
      dataLabels: {
        enabled: true,
        formatter: function() {
          var color = '';
          var serie = this.series.name; 
          if (serie == '2017') {
            color = 'blue';
          } else if (serie == '2018') {
            color = 'orange';
          } else {
            if (this.x == 0) {
              //console.log(serie);
              color = 'red';
            } else {
              color = 'white';
            }
          }

          //console.log(serie);
          //console.log(this.point.y);
          //this.point.attr({x:40});
          //this.point.y.plotY =50;
          //this.point.plotY =-30;

          return '<span style="color:' + color + '">' + this.y + '</span>';
        },
        align: 'center',
        color: 'black',
        rotation: -90, //set label position vertical
        y: -30 // position point
        //if value point is > 267, set label position with Y = 30, else Y = -30
      }
    }
  },

  series: [{
    name: '2017',
    data: [275, 270, 276, 265, 271, null],
    color: 'purple'
  }, {
    name: '2018',
    data: [260, 265, null, 270, 263, 266],
    color: 'green',
    lineWidth: 4
  }, {
    type: 'spline',
    name: '2018-Meta',
    data: [267, 267, 267, 267, 267, 267],
    marker: {
      lineWidth: 2,
      lineColor: 'red',
      fillColor: 'red',
      symbol: 'circle'
    },
    color: 'red'
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }

});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<div id="container" class="chart"></div>

Answer 1

Highcharts formatter是用于格式化数据标签的回调JavaScript函数。因此，它并非旨在更改数据标签的位置。

但是，您可以使用Highcharts.SVGElement.translate方法在图表加载后更改数据标签的位置，该方法允许您随意转换数据标签。查看下面发布的演示和代码。

代码：

  chart: {
    events: {
      load: function() {
        var chart = this;

        chart.series.forEach(function(series) {
          series.points.forEach(function(point) {
            if (point.y >= 267) {
                point.dataLabel.translate(0, -40); // point.dataLabel is a SVGElement
            }
          });
        });
      }
    }
  }

演示：
https://jsfiddle.net/BlackLabel/hdjfbm0t/

API参考：
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/series.line.dataLabels.formatter
https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate