时间戳

首页 > 解决方案 > 如何在标签 Highcharts 中设置“Y”位置

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

问题描述

我正在尝试更改标签的位置，如果大于 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>

标签： javascripthighcharts

解决方案

Highchartsformatter是一个用于格式化数据标签的回调 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

推荐阅读