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

Метод 1: использование amCharts со встроенными легендами и метками значений
amCharts предоставляет встроенные параметры для отображения легенд и фактических значений в круговых диаграммах. Вот пример фрагмента кода:

// HTML
<div id="chartdiv"></div>
// JavaScript
var chart = am4core.create("chartdiv", am4charts.PieChart);
chart.data = [
  {
    category: "Category 1",
    value: 25
  },
  {
    category: "Category 2",
    value: 35
  },
  {
    category: "Category 3",
    value: 40
  }
];
chart.innerRadius = am4core.percent(40);
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "value";
pieSeries.dataFields.category = "category";
pieSeries.labels.template.disabled = true;
pieSeries.ticks.template.disabled = true;
chart.legend = new am4charts.Legend();
chart.legend.labels.template.text = "{category}: {value}%";

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

// HTML
<div id="chartdiv"></div>
// JavaScript
var chart = am4core.create("chartdiv", am4charts.PieChart);
chart.data = [
  {
    category: "Category 1",
    value: 25
  },
  {
    category: "Category 2",
    value: 35
  },
  {
    category: "Category 3",
    value: 40
  }
];
chart.innerRadius = am4core.percent(40);
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "value";
pieSeries.dataFields.category = "category";
pieSeries.labels.template.text = "{value}%";
pieSeries.labels.template.fontSize = 12;
pieSeries.ticks.template.disabled = true;
chart.legend = new am4charts.Legend();
chart.legend.labels.template.text = "{category}";
// Custom CSS for legend and labels
chart.legend.itemContainers.template.paddingTop = 2;
chart.legend.itemContainers.template.paddingBottom = 2;
chart.legend.itemContainers.template.paddingLeft = 10;
chart.legend.itemContainers.template.paddingRight = 10;
chart.legend.labels.template.fontSize = 12;
chart.legend.valueLabels.template.fontSize = 12;
chart.legend.valueLabels.template.textAlign = "end";

Метод 3. Использование внешних библиотек для расширенных легенд
Если вам требуется более сложная настройка легенд, вы можете рассмотреть возможность использования внешних библиотек, таких как D3.js или Chart.js, в сочетании с amCharts. Эти библиотеки предоставляют широкие возможности для создания легенд с различными стилями и макетами.

Круговые диаграммы эффективны для визуального представления данных, а библиотека amCharts предоставляет несколько методов для создания круговых диаграмм с легендами и фактическими значениями. Вы можете использовать встроенные параметры amCharts или настроить легенды и метки значений в соответствии с вашими конкретными требованиями. Кроме того, вы можете использовать внешние библиотеки, такие как D3.js или Chart.js, для расширенной настройки легенды.