DonutChart
Udział w całości dla kilku części, na przykład wizyty według urządzenia. Wybierz go dla co najwyżej pięciu części; powyżej tego najmniejsze łączą się w jeden wycinek „inne”, a wykres słupkowy może być czytelniejszy.
- DonutChart
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: DonutChart
29,492visits
- 62%Desktop(18,204)
- 33%Mobile(9,871)
- 4%Tablet(1,204)
- <1%TV(140)
- <1%Other(73)
10.1 GB
- 61%Images(6.2 GB)
- 31%Video(3.1 GB)
- 8%Documents(0.8 GB)
No visits yet.
Noc, podgląd: DonutChart
29,492visits
- 62%Desktop(18,204)
- 33%Mobile(9,871)
- 4%Tablet(1,204)
- <1%TV(140)
- <1%Other(73)
10.1 GB
- 61%Images(6.2 GB)
- 31%Video(3.1 GB)
- 8%Documents(0.8 GB)
No visits yet.
Wysoki kontrast, podgląd: DonutChart
29,492visits
- 62%Desktop(18,204)
- 33%Mobile(9,871)
- 4%Tablet(1,204)
- <1%TV(140)
- <1%Other(73)
10.1 GB
- 61%Images(6.2 GB)
- 31%Video(3.1 GB)
- 8%Documents(0.8 GB)
No visits yet.
UżycieLink do sekcji Użycie
import { DonutChart } from '@skribly/ui/charts'<DonutChart
label="Visits by device"
slices={[
{ id: 'desktop', label: 'Desktop', value: 18_204 },
{ id: 'mobile', label: 'Mobile', value: 9_871 },
{ id: 'tablet', label: 'Tablet', value: 1_204 }
]}
centerLabel="visits"
otherLabel="Other"
/>Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.
DostępnośćLink do sekcji Dostępność
- Pierścień jest dekoracją.
- Legenda obok to lista z każdym udziałem, nazwą i wartością w tekście, a suma jest w otworze jako tekst.
- Wskazanie wycinka albo pozycji podświetla oba jako dodatek; nic nie jest tylko po najechaniu.
- Wycinki są rozdzielone przerwą, która zostaje w trybie wymuszonych kolorów.
- W wąskim polu legenda zawija się pod pierścień.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.