Изменение размера пузырей карты при обновлении в картах Highcharts

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

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/maps/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/maps/modules/tiledwebmap.js"></script>

<div id="container"></div>
<button id="change-size-button">
Изменить размер пузыря
</button>

var map;
map = Highcharts.mapChart("container", {
  mapNavigation: {
    enabled: true,
    buttonOptions: {
      alignTo: "spacingBox",
    },
  },

  mapView: {
    projection: {
      name: "WebMercator",
    },
    center: [152.9993, -27.41962],
    zoom: 10,
  },
  series: [
    {
      type: "tiledwebmap",
      name: "Плитки",
      provider: {
        type: "OpenStreetMap",
        theme: "Стандартный",
        subdomain: "a",
      },
      opacity: 0.5,
    },
    {
      type: "mapbubble",
      
      minSize: 20,
      maxSize: 100,
      data: [
        {
        name: "Новая серия",
          lat: -27.451,
          lon: 153.0117,
          z: 30,
          color: "#F00011",
        },
      ],
    },
  ],
})

document
  .getElementById("change-size-button")
  .addEventListener("click", function () {
    map.series[1].data.forEach((point) => {
      point.update({
        // Это работает правильно
            name: "Обновленная серия",
        color: "#080CAB",
        // Это не работает
        z: 40,
      })
    })
  })

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

Как плавно изменить размер пузыря на карте Highcharts при обновлении

Вам необходимо выполнить три задачи на карте с пузырем в Highcharts: изменить его размер, цвет и осуществить плавный переход между состояниями. Ваша текущая реализация достигает плавной смены цвета, но не может корректно изменять размер пузыря. Давайте детально разберемся, как реализовать полный функционал.

1. Основные настройки Highcharts

Для начала, рассмотрим ваш исходный код. Вы используете Highcharts.mapChart для создания карты, а в качестве одной из серий данных – mapbubble. Убедитесь, что правильно настроены параметры карты и пузыря. Вот базовая структура:

var map = Highcharts.mapChart("container", {
  mapNavigation: {
    enabled: true,
    buttonOptions: {
      alignTo: "spacingBox",
    },
  },
  series: [
    {
      type: "tiledwebmap",
      name: "Tiles",
      provider: {
        type: "OpenStreetMap",
        theme: "Standard",
        subdomain: "a",
      },
      opacity: 0.5,
    },
    {
      type: "mapbubble",
      minSize: 20,
      maxSize: 100,
      data: [
        {
          name: "New series",
          lat: -27.451,
          lon: 153.0117,
          z: 30,
          color: "#F00011",
        },
      ],
    },
  ],
});

2. Изменение пузыря: цвет и размер

Для обновления пузыря вы воспользуетесь методом point.update(). Убедитесь, что вы используете правильные атрибуты для обновления. Чтобы изменения размеров происходили плавно, важно использовать параметр transition в настройках.

Ниже приведен пример, как вы можете добавить плавные изменения для цвета и размера:

document
  .getElementById("change-size-button")
  .addEventListener("click", function () {
    map.series[1].data.forEach((point) => {
      point.update({
        name: "Updated series",
        color: "#080CAB",
        z: 40, // изменяем размер
        marker: {
          states: {
            hover: {
              enabled: true,
              radiusPlus: 5 // Добавляем эффект при наведении
            }
          },
          radius: point.z * 2 // Здесь point.z * 2 - для изменения размера по вашему критерию
        },
      }, true, true); // второй true для анимации
    });
  });

3. Анимация и плавный переход

Чтобы обеспечить плавную анимацию размеров при обновлениях, используйте встроенные возможности Highcharts. Важно передавать аргументы true, чтобы вызвать анимацию. Параметр marker с указанием radius позволяет вам изменять размеры пузыря эффективно.

marker.radius принимает значение, определяемое вами. Будьте внимательны: значение радиуса должно быть в согласии с параметрами minSize и maxSize для обеспечения правильной анимации.

Заключение

Теперь ваш пузырь должен плавно менять цвет и размер при нажатии на кнопку. Это достигается через сочетание метода point.update(), достаточного управления состояниями marker и параметров анимации. Highcharts предоставляет мощный инструментарий для создания визуализаций, и с правильным подходом вы можете добиться эффекта, который ожидаете.

Если у вас возникнут дополнительные вопросы или потребуется помощь с другими аспектами работы с Highcharts, не стесняйтесь обращаться. Удачи в ваших проектах!