BarChart
Liczby na dzień jako kolumny albo ranking jako wiersze. Wybierz kolumny dla liczby w czasie i oznacz dni, które wymagają spojrzenia; wybierz wiersze dla list najlepszych, gdzie nazwy mogą być długie, a ekran wąski.
- BarChart
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: BarChart
Errors per day, last 14 daysTwo spikes: 41 errors and 33 errors.
- Errors
- Spike
Use the arrow keys to read each day.
- 1Home4,210
- 2Changelog2,380
- 3Docs: getting started with the command line tools on a new machine1,904
- 4Blog1,250
- 5ChangelogNew610
- 6Contact188
Noc, podgląd: BarChart
Errors per day, last 14 daysTwo spikes: 41 errors and 33 errors.
- Errors
- Spike
Use the arrow keys to read each day.
- 1Home4,210
- 2Changelog2,380
- 3Docs: getting started with the command line tools on a new machine1,904
- 4Blog1,250
- 5ChangelogNew610
- 6Contact188
Wysoki kontrast, podgląd: BarChart
Errors per day, last 14 daysTwo spikes: 41 errors and 33 errors.
- Errors
- Spike
Use the arrow keys to read each day.
- 1Home4,210
- 2Changelog2,380
- 3Docs: getting started with the command line tools on a new machine1,904
- 4Blog1,250
- 5ChangelogNew610
- 6Contact188
UżycieLink do sekcji Użycie
import { BarChart } from '@skribly/ui/charts'<BarChart
label="Errors per day"
valueLabel="Errors"
data={days.map((day) => ({ id: day.iso, label: day.long, axisLabel: day.short, value: day.errors, highlight: day.errors > 30 }))}
highlightLabel="Spike"
keyboardHint="Use the arrow keys to read each day."
table={{ trigger: 'Show as table', categoryHeader: 'Date' }}
/>
<BarChart orientation="rows" ordered label="Top pages" valueLabel="Visits" data={pages} />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ść
- Kolumny działają jak wykres liniowy: jeden przystanek w kolejności Tab, klawisze strzałek, Home i End, region na żywo typu polite, Escape ukrywa dymek i tabela każdej wartości.
- Wyróżniona kolumna ma znacznik nad sobą, a jej znaczenie jest w legendzie, dymku i tym, co jest odczytywane, więc oznaczenie nie opiera się na kolorze.
- Wiersze to zwykła lista z każdą nazwą i wartością w tekście; słupki są ukryte przed czytnikami ekranu.
- Wiersze zawijają nazwy i w wąskim polu umieszczają słupek w osobnej linii.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.