Ma'lumot · primitive
Legenda
Mustaqil legenda: rang belgisi + nom (+ qiymat). Grafik, uluş çiziği va köp bölakli progress yonida. Rollar 60/30/10 (ink, brend, aksent, xavf, kontekst); belgi şakli — kvadrat, nuqta yoki çiziq. Tugma bölsa (aria-pressed) seriyani yoqib-öçiradi (#62). Interaktiv (4.126): data-interactive + data-fx-legend + aria-controls — bandni bosiş boğlangan grafik seriyasini yaşiradi yoki qaytaradi (aria-pressed, oxirgi seriya öçmaydi).
- Bu yil1 240
- Ötgan yil980
- Bekor qilingan34
| Hafta | Toşkent | Samarqand | Buxoro |
|---|---|---|---|
| 1 | 42 | 18 | 9 |
| 2 | 48 | 22 | 11 |
| 3 | 45 | 27 | 10 |
| 4 | 53 | 31 | 14 |
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-direction | column | row |
data-role | brandinkaccentriskcontext | brand |
data-shape | dotline | square |
data-interactive | true tugmali; aria-controls — fx-chart id | — |
Anatomiya
- root
.fx-legendşart - item
.fx-legend__itemşart - swatch
.fx-legend__swatchşart - label
.fx-legend__labelşart - value
.fx-legend__valueixtiyoriy
Holatlar
off
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab, Enter, Space | Interaktiv legendada seriyani yoqadi/öçiradi |
Röyxat <ul> + aria-label (yoki tugmalar guruhi role="group"); tugma holati aria-pressed, öçirilgan seriya çizilgan matn bilan ham körinadi; belgi bezak (matn bor).
Kod
AI uçun: qaçon işlatiladi
Işlating
- Grafik yoki köp bölakli çiziq ranglarini izohlaş.
Işlatmang
- Yagona seriya →
chart - Rangni yolğiz belgi qilmang — nom doim yoziladi.
- 5 tadan köp seriya uçun legenda emas, bevosita yorliq yoki jadval.
- HEX bermang — rol (data-role).
npx foxui add legend
<ul class="fx-legend" aria-label="Seriyalar"> <li class="fx-legend__item"><span class="fx-legend__swatch" data-role="ink"></span><span class="fx-legend__label">Bu yil</span><span class="fx-legend__value">1 240</span></li> <li class="fx-legend__item"><span class="fx-legend__swatch" data-role="context"></span><span class="fx-legend__label">Ötgan yil</span><span class="fx-legend__value">980</span></li> <li class="fx-legend__item"><span class="fx-legend__swatch" data-role="risk"></span><span class="fx-legend__label">Bekor qilingan</span><span class="fx-legend__value">34</span></li> </ul> <div class="fx-legend" role="group" aria-label="Seriyalarni körsatiş"> <button class="fx-legend__item" type="button" aria-pressed="true"><span class="fx-legend__swatch" data-role="ink" data-shape="line"></span><span class="fx-legend__label">Tuşum</span></button> <button class="fx-legend__item" type="button" aria-pressed="false"><span class="fx-legend__swatch" data-role="accent" data-shape="line"></span><span class="fx-legend__label">Xarajat</span></button> </div> <div class="fx-legend" data-interactive data-fx-legend aria-controls="lg-chart" aria-label="Seriyalarni körsatiş"> <button class="fx-legend__item" type="button" aria-pressed="true"><span class="fx-legend__swatch" data-role="ink"></span><span class="fx-legend__label">Toşkent</span></button> <button class="fx-legend__item" type="button" aria-pressed="true"><span class="fx-legend__swatch" data-role="brand"></span><span class="fx-legend__label">Samarqand</span></button> <button class="fx-legend__item" type="button" aria-pressed="false"><span class="fx-legend__swatch" data-role="context"></span><span class="fx-legend__label">Buxoro</span></button> </div> <figure class="fx-chart" id="lg-chart" data-fx-chart data-type="line" data-roles="ink,brand,context"> <figcaption><span class="fx-chart__title">Filiallar böyiça buyurtmalar</span><span class="fx-chart__sub">dona · haftalik</span></figcaption> <table class="fx-chart__data"><thead><tr><th>Hafta</th><th>Toşkent</th><th>Samarqand</th><th>Buxoro</th></tr></thead> <tbody><tr><th>1</th><td>42</td><td>18</td><td>9</td></tr><tr><th>2</th><td>48</td><td>22</td><td>11</td></tr><tr><th>3</th><td>45</td><td>27</td><td>10</td></tr><tr><th>4</th><td>53</td><td>31</td><td>14</td></tr></tbody></table> </figure>
Tokenlar: --fx-bg-muted --fx-bg-pressed --fx-border-color-focus --fx-border-width-focus --fx-font-size-xs --fx-font-weight-medium --fx-radius-badge --fx-radius-circle --fx-size-min-target --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-primary --fx-text-secondary --fx-text-tertiary --fx-viz-accent --fx-viz-brand --fx-viz-context --fx-viz-ink --fx-viz-risk --fx-viz-track
Şu toifadan
API kalitlariAPI kalitlari boşqaruvi (naqş): «Yangi kalit» dialogi (nom, muddat, ruxsat) → kalit BIR MARTA körsatiladi (nusxalaş tugmasi va ogohlantiriş bilan) → röyxatda faqat prefiks qoladi.Audit jurnaliXavfsizlik va boşqaruv jurnali (4.191): «kim · nima · qaçon · qayerdan».Ustunli röyxatHar satrda nom, uluş çiziği va qiymat: eng köp trafik manbalari, şaharlar, mahsulotlar.Tarif va hisob-kitobTarif va hisob-kitob sahifasi (naqş): joriy reja (narx sömda, keyingi tölov sanasi, avtomatik uzaytiriş), foydalaniş meter'lari (çegara yaqin — ogohlantiriş), tölov usuli (karta turi, •••• 4417, muddat) va hisob-fakturalar jadvali (PDF).Doska (kanban)Holat ustunlari va kartalar.GrafikGrafik oilasi: ustun (guruh, ustma-ust), gorizontal ustun, çiziq (yakka seriyada sönuvçi maydon), mini-çiziq, donut (≤ 4 bölak), uluş çiziği, çiziqli ölçagiç va issiqlik xaritasi.