сделать xaxis datalabels того же цвета, что и бар Highcharts

Question

я пытаюсь сделать так, чтобы все метки данных Xaxis имели тот же цвет, что и цвет бара

, есть ли способ сделать так, чтобы он совпадал?

вот код

var colors = ['#76daff','#b9f','#99ffa6','#ffc312'];
xAxis: {
      type: 'category',
      labels: {
        useHTML : true,
        formatter: function () {
             return '<div class="myToolTip" style="color:'+colors+'">'+this.value+'</div>';
        },
      }
    },

Вот ссылка для полного кода

Answer 1

В данный момент вы заполняете представление полного массива colors в своем определении стиля.Это приводит к следующему:

style="color:#76daff,#b9f,#99ffa6,#ffc312"

Что, очевидно, не является желаемым поведением.

Но ваша функция formatter может получить информацию о своем контексте (в данном случае соответствующие данныепункт) с помощью this, как уже показано, с помощью this.value для отображения правильного значения.this Additional имеет свойство this.pos, которое содержит индекс для текущей точки данных.(К счастью, индекс начинает отсчитываться с 0, как это делал бы каждый программист)

Так что, слегка адаптировав свой код, вы получите текущий соответствующий цвет вместо полного массива:

formatter: function () {
  return '<div class="myToolTip" style="color:'+colors[this.pos]+'">'+this.value+'</div>';
}

Но какЕще одна гарантия: вы можете либо повторить поведение старших графиков, когда дается меньше цветов, чем значений (в конце массива цветов вы просто начинаете все сначала, используя модуль):

formatter: function () {
  return '<div class="myToolTip" style="color:'+colors[this.pos % color.length]+'">'+this.value+'</div>';
}

Редактировать: I обновил ваш код , чтобы показать вам рабочий пример.Я также использовал стандартную formatString для стилизации фактического значения соответственно.