Решение проблем с нулевыми значениями в amCharts 4 карты

Установите ‘treatZeroAs’ для карты (amCharts 4)

На чтение 2 мин Опубликовано 24.09.2024

Вопрос или проблема

В проекте у меня есть карта с функцией тепловой карты. В heatRules я использую логарифмический шаблон заполнения, который не работает, когда есть области с 0 в их значении.

// ...
heatRules: [
  {
    target: 'mapPolygons.template',
    property: 'fill',
    min: minColor,
    max: maxColor,
    logarithmic: true,
  },
],
// ...

Без значений 0

С значениями 0

Я нашел на stack overflow похожий вопрос, в ответе на который говорится, что есть свойство treatZeroAs, которое можно установить для оси значений графика, чтобы сделать логарифмическим обработку значений 0. Но я не знаю, как установить это свойство для карты.

Не мог бы кто-нибудь направить меня в правильном направлении, пожалуйста?

Ответ или решение

Чтобы решить проблему с обработкой нулевых значений в тепловой карте с использованием логарифмической цветовой заливки в amCharts 4, действительно, можно задать свойство treatZeroAs. Однако это свойство относится к осям, которые могут быть специфичны для графиков, а не для карт. Основная задача заключается в том, чтобы правильно настроить правила тепла (heatRules), чтобы избежать проблем, связанных с нулевыми значениями.

В случае использования логарифмической панели для карт, к сожалению, метод, аналогичный treatZeroAs, не поддерживается напрямую. Но вы можете обойти эту проблему, изменив значения перед их передачей в heatRules. Вот несколько подходов, которые можно использовать:

Замена нулевых значений: Замените нулевые значения на небольшое положительное число (например, 0.01) перед тем, как передать их в таблицу значений карты.
```
data.forEach(function (item) {
   if (item.value === 0) {
       item.value = 0.01; // Заменяем 0 на 0.01
   }
});

// Теперь ваши данные могут быть использованы в heatRules
```
Использование условной логики: Проверьте значения во время создания карты и примените специальную цветовую заливку или стиль для полигонов с нулевыми значениями. Это может включать установку конкретного цвета заливки для таких объектов.
```
heatRules: [
   {
       target: "mapPolygons.template",
       property: "fill",
       min: minColor,
       max: maxColor,
       logarithmic: true,
   },
],

mapPolygons.template.events.on("inited", function(event) {
   if (event.target.dataItem.values.value.dataContext.value === 0) {
       event.target.fill = am4core.color("#CCCCCC"); // Например, серый цвет для нулевых значений
   }
});
```
Обработка источника данных: Если вы извлекаете данные с сервера, вы можете обработать их на серверной стороне, чтобы избавить данные от нулевых значений или заменить их перед передачей на клиент.

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