如何在标签Highcharts中设置“Y”位置[复制]

Posted 2021-05-05

这个问题在这里已有答案：

• Is it possible to position Highcharts dataLabels depending on the value? 4个答案

我试图改变标签的位置，如果它大于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>

答案

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

但是： Ku zxsw Poi

API参考： https://jsfiddle.net/BlackLabel/hdjfbm0t/ https://api.highcharts.com/highcharts/chart.events.load https://api.highcharts.com/highcharts/series.line.dataLabels.formatter