LineChart
Trend w czasie dla jednej lub kilku miar na jednej osi. Wybierz go dla serii dziennych albo tygodniowych; dodaj poprzedni okres jako linię-cień do porównania oraz adnotacje dla wydań albo incydentów.
- LineChart
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: LineChart
Visits, last 28 days1,407 visits on the last day; lowest 975, highest 1,822.
- Visits
- Previous 28 days
- Events
Use the arrow keys to read each day.
Visits by deviceMobile has no data for two days while tracking was paused.
- Desktop
- Mobile
- Tablet
Use the arrow keys to read each day.
Use the arrow keys to read each day.
Noc, podgląd: LineChart
Visits, last 28 days1,407 visits on the last day; lowest 975, highest 1,822.
- Visits
- Previous 28 days
- Events
Use the arrow keys to read each day.
Visits by deviceMobile has no data for two days while tracking was paused.
- Desktop
- Mobile
- Tablet
Use the arrow keys to read each day.
Use the arrow keys to read each day.
Wysoki kontrast, podgląd: LineChart
Visits, last 28 days1,407 visits on the last day; lowest 975, highest 1,822.
- Visits
- Previous 28 days
- Events
Use the arrow keys to read each day.
Visits by deviceMobile has no data for two days while tracking was paused.
- Desktop
- Mobile
- Tablet
Use the arrow keys to read each day.
Use the arrow keys to read each day.
UżycieLink do sekcji Użycie
import { LineChart } from '@skribly/ui/charts'<LineChart
label="Visits, last 28 days"
description="1,602 visits yesterday, 22 % more than the period before."
keyboardHint="Use the arrow keys to read each day."
categories={days.map(longDate)}
axisLabels={days.map(shortDate)}
series={[
{ id: 'visits', label: 'Visits', values },
{ id: 'previous', label: 'Previous 28 days', values: before, ghost: true }
]}
annotations={[{ index: 14, label: 'Version 2.4 released' }]}
annotationsLabel="Releases"
table={{ trigger: 'Show as table', categoryHeader: 'Date', annotationHeader: 'Note' }}
/>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ść
- Figura nazwana przez label i opisana podsumowaniem.
- Wykres jest jednym przystankiem w kolejności Tab: strzałka w lewo i w prawo (albo w górę i w dół) przechodzi między punktami, Home i End skaczą na końce, a każdy ruch jest odczytywany przez region na żywo typu polite z datą, każdą serią i ewentualną notatką.
- Escape ukrywa dymek, który otwiera się też po najechaniu i zostaje, gdy wskaźnik jest nad wykresem.
- Serie różnią się wzorem linii, a nie tylko kolorem, a legenda je nazywa.
- Tabela zawiera każdą wartość.
- Linie siatki, linie i etykiety używają kolorów systemowych w trybie wymuszonych kolorów.
- SVG rysuje się w szerokości swojego pola, więc układa się przy 320 px i powiększeniu 400%.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.