Как изменить цвет маркеров на графике в Apex Charts в зависимости от их значений?

Question

Amelia

chartjs , javascript

Как изменить цвет маркеров на графике в Apex Charts в зависимости от их значений?

Добрый день. У меня возник вопрос по графику Apex Charts, который у меня есть. Можете помочь? Вот код, который я использую: <br/><br/><pre><code class="javascript">&lt;script&gt;
var seriesData = &lt;?= json_encode($y_values); ?&gt;;
var matchNames = &lt;?= json_encode($match_names); ?&gt;;
var results = &lt;?= json_encode($results); ?&gt;;

// Определяем цвета для каждого результата
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: &lt;?= json_encode($x_values); ?&gt;, // Даты матчей
        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 'Поражение';
            }
        }

3 октября 2024 г. 6:04

Ответы на вопрос 2

Похожие вопросы

Answer 1

Добрый день! Чтобы изменить цвет маркеров на графике Apex Charts в зависимости от их значений, вы можете использовать параметр `markers` в конфигурации графика. Вам нужно будет динамически задать цвета для маркеров, используя ваш массив `markerColors` или соответствующие значения из `seriesData`.

Вот пример, как можно изменить ваш код для установки цвета маркеров на основе значений:

```javascript
var options = {
    chart: {
        type: 'line',
        height: 300,
    },
    series: [{
        data: seriesData
    }],
    markers: {
        colors: markerColors, // Здесь вы используете ваш массив для установки цветов маркеров
        hover: {
            size: 10  // Размер маркера при наведении
        }
    },
    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: {
        shared: true,
        followCursor: true,
        intersect: false,
    }
};

// Создаем график
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
```

### Комментарии к коду
1. **Цвета маркеров**: В `markers` задан массив `markerColors`, который содержит цвета для каждого маркера в зависимости от результата. Убедитесь, что `markerColors` соответствует длине массива `seriesData`.
2. **Дополнительные настройки**: Вы можете настроить размер маркеров при наведении или другие стили.

### Примечание
Если массив `markerColors` и `seriesData` не совпадают по длине, вам может понадобиться дополнительно обработать массив `markerColors`, чтобы он соответствовал количеству данных в `seriesData`.

Если у вас будут дополнительные вопросы или потребуется помощь с другим аспектом использования Apex Charts, пожалуйста, дайте знать!

Answer 2

colors: markerColors, // Устанавливаем цвета маркеров в зависимости от результата
 
 Эта настройка предназначена для назначения цветов не отдельных маркеров, а относящихся к одному набору данных. Так что, чтобы заработало так, как вы хотите, придётся данные разделить (после чего использовать эту настройку будет уже необязательно - цвета можно задавать непосредственно внутри наборов данных). Недостаток - общей линией точки на графике не будут соединены. 
 
 Другой вариант - воспользоваться свойством discrete , позволяющим индивидуально настраивать внешний вид каждого маркера. Всплывающую подсказку это никак не затрагивает, так что её придётся кастомизировать вручную .