Визуализация данных играет решающую роль в представлении сложной информации в визуально привлекательной и понятной форме. Кольцевые диаграммы — популярный выбор для отображения распределения данных в круговом формате. ApexCharts — это мощная библиотека JavaScript, которая предоставляет различные варианты построения диаграмм, включая возможность создания кольцевых диаграмм. В этой статье мы рассмотрим различные методы разметки центра кольцевой диаграммы ApexCharts, а также приведем примеры кода.

Метод 1: использование свойства dataLabels:

ApexCharts предоставляет свойство dataLabels, которое позволяет отображать метки в центре кольцевой диаграммы. Установив для параметра dataLabels.enabledзначение true, мы можем включить маркировку по центру. Вот пример:

var options = {
  series: [44, 55, 13, 43, 22],
  chart: {
    type: 'donut',
  },
  dataLabels: {
    enabled: true,
    formatter: function (val) {
      return val + "%";
    },
  },
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

Метод 2. Использование пользовательских элементов SVG:

Другой подход — вручную создать элементы SVG для маркировки центра. Этот метод обеспечивает большую гибкость с точки зрения настройки. Мы можем разместить и оформить этикетки в соответствии с нашими требованиями. Вот пример:

var options = {
  series: [44, 55, 13, 43, 22],
  chart: {
    type: 'donut',
  },
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
var centerX = chart.w.globals.gridWidth / 2 + chart.w.globals.gridLeft;
var centerY = chart.w.globals.gridHeight / 2 + chart.w.globals.gridTop;
var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
label.setAttribute("x", centerX);
label.setAttribute("y", centerY);
label.setAttribute("text-anchor", "middle");
label.setAttribute("dominant-baseline", "middle");
label.setAttribute("class", "donut-label");
label.textContent = "Center Label";
chart.w.globals.dom.baseEl.querySelector(".apexcharts-svg").appendChild(label);

Метод 3. Использование функции annotations:

Функция

ApexCharts annotationsпозволяет нам добавлять на диаграмму собственные элементы. Мы можем использовать эту функцию для размещения меток в центре кольцевой диаграммы. Вот пример:

var options = {
  series: [44, 55, 13, 43, 22],
  chart: {
    type: 'donut',
  },
  annotations: {
    position: 'center',
    offsetY: 0,
    text: 'Center Label',
  },
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

Разметку центра кольцевой диаграммы ApexCharts можно выполнить различными методами. Мы рассмотрели три подхода: использование свойства dataLabels, создание пользовательских элементов SVG и использование функции annotations. Каждый метод предлагает разные уровни гибкости и настройки. Включив эти методы в свои проекты, вы сможете повысить визуальное воздействие и ясность кольцевых диаграмм.

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