Как в Apex Charts покрасить маркеры на графике в зависимости от значения?

Question

[Solation]

У меня есть график Apex Charts:

<script>
var seriesData = <?= json_encode($y_values); ?>;
var matchNames = <?= json_encode($match_names); ?>;
var results = <?= json_encode($results); ?>;

// Определяем цвета для каждого результата
var colors = seriesData.map(function(value) {
    if (value === 1) {
        return '#28a745'; // Зеленый для победы
    } else if (value === 0) {
        return '#6c757d'; // Серый для ничьей
    } else if (value === -1) {
        return '#dc3545'; // Красный для поражения
    }
});

// Создаем массив для цветов маркеров
var markerColors = results.map(function(result) {
    if (result === 'Победа') {
        return '#28a745'; // Зеленый для победы
    } else if (result === 'Ничья') {
        return '#6c757d'; // Серый для ничьей
    } else if (result === 'Поражение') {
        return '#dc3545'; // Красный для поражения
    }
});

var options = {
    chart: {
        type: 'line',
        height: 300,
    },
    series: [{
        data: seriesData
    }],
    xaxis: {
        categories: <?= json_encode($x_values); ?>, // Даты матчей
        labels: {
            rotate: -45,
            format: 'dd.MM HH:mm' // Формат даты
        }
    },
    yaxis: {
        min: -1,  // Минимальное значение (Поражение)
        max: 1,   // Максимальное значение (Победа)
        tickAmount: 2, // Только три уровня: Победа, Ничья, Поражение
        labels: {
            formatter: function(value) {
                if (value === 1) return 'Победа';
                if (value === 0) return 'Ничья';
                if (value === -1) return 'Поражение';
            }
        }
    },
    tooltip: {
        y: {
            title: {
                formatter: function() {
                    return ''; // Пустая строка, чтобы скрыть имя серии
                }
            },
            formatter: function(value, { dataPointIndex, w }) {
                // Формируем строку с информацией о матче и результате
                let matchInfo = matchNames[dataPointIndex];
                let resultText = "Результат матча: " + results[dataPointIndex];
                
                // Выравниваем текст по левому краю и возвращаем содержимое для тултипа
                return '<div style="text-align: left;">' + 
                        matchInfo + '<br>' + 
                        resultText + '</div>';
            }
        }
    },
    stroke: {
        curve: 'smooth',
        width: 3,
        colors: colors // Устанавливаем цвета сегментов в зависимости от результата
    },
    markers: {
        size: 5,
        colors: markerColors, // Устанавливаем цвета маркеров в зависимости от результата
        strokeWidth: 2,
        hover: {
            size: 7 // Увеличение размера маркеров при наведении
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            }
        }
    }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

</script>

Я хочу в зависимости от результата (Победа - зеленая точка, Ничья - серая точка, Поражение - красная точка) покрасить маркеры (точки) на графике. На самом графике (желтая стрелка на скриншоте) и в подсказке (красная стрелка). Как это сделать?

Answer 1

[0xD34F]

colors: markerColors, // Устанавливаем цвета маркеров в зависимости от результата

Эта настройка предназначена для назначения цветов не отдельных маркеров, а относящихся к одному набору данных. Так что, чтобы заработало так, как вы хотите, придётся данные разделить. После чего использовать эту настройку станет уже необязательно - цвета можно задавать непосредственно внутри наборов данных. Недостаток - общей линией точки на графике не будут соединены.

Другой вариант - воспользоваться свойством discrete, позволяющим индивидуально настраивать внешний вид каждого маркера. Всплывающую подсказку это никак не затрагивает, так что её придётся кастомизировать отдельно.