Расположение значений в гистограмме Highcharts.js

Question

Я пытаюсь сделать гистограмму похожей на картинку здесь : Здесь - это результат, который я получил Может быть, кто-то может подсказать, как я могу прикрепить значение к xAxis?Ряды, которые я хочу построить:

series: [{
           name: 'text',
           data: [{"color":"#17a78b","y":3.36},
             {"color":"#17a78b","y":2.1},{"color":"#17a78b","y":1.67}, 
             {"color":"#17a78b","y":2.07},{"color":"#17a78b","y":-3.89},
             {"color":"#17a78b","y":2.73},{"color":"#17a78b","y":2.34},
             {"color":"#17a78b","y":2.91},{"color":"#56e8cb","y":4.94},
             {"color":"#56e8cb","y":2.99},{"color":"#56e8cb","y":-2.5},
             {"color":"#56e8cb","y":3.77}]
                                }]

Или, может быть, есть какой-то способ стилизовать отрицательное и положительное значение

Answer 1

Вы можете сделать это, используя метод Highcharts.SVGElement.translate.Каждая метка данных является элементом SVG, который вы можете перевести в зависимости от ваших потребностей.Это решение является более гибким, поскольку вы можете добавить больше пользовательской логики, анализируя высоту точек и меток.Проверьте демо и код, который я разместил ниже.

Код:

  chart: {
    type: 'column',
    events: {
        render: function() {
        var chart = this,
            series = chart.series[0],
            offset = 3,
            pointHeight,
            textHeight,
            translateY;

        series.points.forEach(function(point) {
            textHeight = point.dataLabel.getBBox().height;
          pointHeight = point.shapeArgs.height;

          if (pointHeight < textHeight) {
            translateY = (pointHeight - textHeight / 2) + textHeight + offset;
          } else {
            translateY = (pointHeight - textHeight / 2) - offset;
          }

          translateY = (point.y < 0) ? -translateY : translateY;
          point.dataLabel.translate(0, translateY);
        });
      }
    }
  }

Демо:
https://jsfiddle.net/30bxv9rc/

Ссылка API:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate
https://api.highcharts.com/highcharts/chart.events.render

Answer 2

Сначала установите plotOptions.column.stacking на normal, чтобы метки данных отображались внутри столбцов.

Затем вам нужно будет обновить каждую точку данных в series с помощью другой функции после диаграммыоказано.Ссылаясь на мой пример , точки данных зациклены;к его значению обращаются, чтобы проверить положительный или отрицательный;и впоследствии атрибуты verticalAlign и y обновляются, так что метка отображается в соответствии с вашим требованием.