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

Методы:

1. Метод с использованием массива серий:
   Самый простой способ сопоставить три значения с тремя радиальными столбцами — использовать массив серий в ApexCharts. Каждому значению будет соответствовать отдельный радиальный столбик. Вот пример фрагмента кода:

var options = {
  series: [65, 85, 45],
  chart: {
    type: 'radialBar',
    height: 350,
  },
  plotOptions: {
    radialBar: {
      hollow: {
        size: '70%',
      },
    },
  },
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

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

var options = {
  series: [45, 65, 85],
  chart: {
    type: 'radialBar',
    height: 350,
  },
  plotOptions: {
    radialBar: {
      hollow: {
        size: '70%',
      },
    },
  },
  labels: ['Category 1', 'Category 2', 'Category 3'],
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

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

var data = [
  {
    value: 65,
    color: '#FF5722',
    label: 'Bar 1',
  },
  {
    value: 85,
    color: '#E91E63',
    label: 'Bar 2',
  },
  {
    value: 45,
    color: '#2196F3',
    label: 'Bar 3',
  },
];
var options = {
  series: data.map((item) => item.value),
  chart: {
    type: 'radialBar',
    height: 350,
  },
  plotOptions: {
    radialBar: {
      hollow: {
        size: '70%',
      },
    },
  },
  labels: data.map((item) => item.label),
  colors: data.map((item) => item.color),
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();