Привет.

Итак, приступим.

Подготовительные мероприятия остаются теми же, что и в 1.2, по сути мы поменяем лишь сам тернарный оператор, который здорово разрастется. Вот он: ( @value.y < 6 ? '<div style="display:flex; align-items:center; color:' + ({0:'#f4a261',1:'#2a9d8f',2:'#264653',3:'#e76f51',4:'#e9c46a',5:'#6a994e',6:'#f94144',7:'#577590',8:'#2c70'}[this.series.index] || '#000') + ';">' + '<span style="white-space:nowrap; margin-right:50px; display:inline-block;">' + // Число смещено вниз '<span style="display:inline-block; transform: translateY(9px);">' + @value.y + '</span> ' + '<span style="color:' + ({0:'#f4a261',1:'#2a9d8f',2:'#264653',3:'#e76f51',4:'#e9c46a',5:'#6a994e',6:'#f94144',7:'#577590',8:'#2c70'}[this.series.index] || '#000') + ';">→</span>' + '</span>' + '<div style="width:20px; height:20px;"></div>' + '</div>' : @value.y < 15 ? '<div style="display:flex; align-items:center; color:' + ({0:'#f4a261',1:'#2a9d8f',2:'#264653',3:'#e76f51',4:'#e9c46a',5:'#6a994e',6:'#f94144',7:'#577590',8:'#2c70'}[this.series.index] || '#000') + ';">' + '<div style="width:20px; height:20px;"></div>' + '<span style="white-space:nowrap; margin-left:57px; display:inline-block;">' + '<span style="color:' + ({0:'#f4a261',1:'#2a9d8f',2:'#264653',3:'#e76f51',4:'#e9c46a',5:'#6a994e',6:'#f94144',7:'#577590',8:'#2c70'}[this.series.index] || '#000') + '; vertical-align: middle;">←</span> ' + '<span style="display:inline-block; transform: translateY(-7px);">' + @value.y + '</span>' + '</span>' + '</div>' : '<div style="text-align:center;">' + @value.y + '</div>' )

▎Что здесь происходит?

У нас всё та же структура кода, как и в прошлом примере:

Если @value.y < 6, то вывести блок с определённым стилем, иначе если @value.y < 15, вывести блок с другим стилем, иначе вывести значение по умолчанию (с выравниванием по центру).

Но сам код разросся вглубь, так как теперь нам надо отдельно фиксировать положение стрелок и цифр данных.

▎Разбор кода по частям:

▎1. Условие: @value.y < 6

Если значение y меньше 6 — применяем такой блок:

style=" display:flex; /* используется специальный flex-контейнер / aligh-items:center; / выравнивание содержимого контейнера по центру / color: <цвет>; / цвет фона */

1. Цвет фона выбирается из объекта по индексу серии this.series.index: ({ 0:'#f4a261', 1:'#2a9d8f', 2:'#5fb2d4', 3:'#e76f51', 4:'#e9c46a', 5:'#6a994e', 6:'#f94144', 7:'#577590', 8:'#2c70' }[this.series.index] || '#000')

Если индекс не найден — используется белый цвет #000.

Внутри <div> кладём <span> с текстом:

• style="white-space:nowrap; margin-right:50px; display:inline-block;" Запрещает перенос текста, добавляет справа отступ 50 пикселей и делает элемент строчно-блочным для отступов и границ.

Внутри этого <span> два элемента:

• Первый — число @value.y, обёрнутое в <span> с CSS: display:inline-block; transform: translateY(9px); — визуально смещает число вниз на 9 пикселей.

• Второй — стрелка → (вот она, у самого конца блока: >→</span>), у которой цвет такой же, как и у текста (берём его из того же объекта цветов).

После <span> с числом и стрелкой идёт пустой <div>:

• style="width:20px; height:20px;" — блок фиксированного размера для выравнивания и отступа.

2. Условие: @value.y < 15

С первым условием мы разобрались. У второго есть небольшие косметические изменения для того, чтобы избежать визуальных конфликтов с первым условием.

Первый <span> — контейнер для стрелки — сдвигаем влево на 57 пикселей: margin-left:57px;

Внутри:

• <span> со стрелкой ← вертикально выравниваем посередине: vertical-align: middle;

• <span> с самим числом @value.y, смещаем немного вверх (translateY(-7px)), чтобы визуально лучше смотрелось рядом со стрелкой и было достаточно пространства рядом с возможными значениями из первого условия.

--