1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Графики и статистика dataanalyticschartdonutpie

Donut Chart

Круговая диаграмма-пончик с процентным распределением долей и легендой.

Loading Chart...

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

astro 
---
import { DonutChart } from 'astro-component-kit';

const labels = ['Desktop', 'Mobile', 'Tablet'];
const series = [65, 25, 10];
---

<DonutChart 
  title="Device Share"
  labels={labels}
  series={series}
  centerLabel="Devices"
/>
--- import { DonutChart } from 'astro-component-kit'; const labels = ['Desktop', 'Mobile', 'Tablet']; const series = [65, 25, 10]; --- <DonutChart title="Device Share" labels={labels} series={series} centerLabel="Devices" />

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/DonutChart.astro:

astro 
---
import { DonutChart } from 'astro-component-kit/charts';

// Example 1: Standard Donut
const labels1 = ['Desktop', 'Mobile', 'Tablet'];
const series1 = [65, 25, 10];

// Example 2: Full Pie
const labels2 = ['Completed', 'Pending', 'Delayed'];
const series2 = [70, 20, 10];
---

<!-- Standard Donut -->
<DonutChart 
  title="Device Distribution"
  labels={labels1}
  series={series1}
  centerLabel="Devices"
/>

<!-- Full Pie Chart -->
<DonutChart 
  title="Task Status"
  labels={labels2}
  series={series2}
  pie={true}
  colors={['#10b981', '#f59e0b', '#ef4444']}
/>
--- import { DonutChart } from 'astro-component-kit/charts'; // Example 1: Standard Donut const labels1 = ['Desktop', 'Mobile', 'Tablet']; const series1 = [65, 25, 10]; // Example 2: Full Pie const labels2 = ['Completed', 'Pending', 'Delayed']; const series2 = [70, 20, 10]; --- <!-- Standard Donut --> <DonutChart title="Device Distribution" labels={labels1} series={series1} centerLabel="Devices" /> <!-- Full Pie Chart --> <DonutChart title="Task Status" labels={labels2} series={series2} pie={true} colors={['#10b981', '#f59e0b', '#ef4444']} />

Краткая информация

Категория
Графики и статистика
Имя файла
DonutChart.astro
Зависимости
apexcharts (peer)
Теги
dataanalyticschartdonutpie