chart

Çizgi, alan, çubuk, yatay çubuk, yığılmış çubuk veya halka; en fazla üç seri.

Hassasiyet değil, şekil. chart, bir grafik kütüphanesine bağımlı olmak yerine yerel olarak çizilen ve her biri en fazla 24 noktadan oluşan en fazla üç seriden bir çizgi, alan, çubuk, yatay çubuk, yığılmış çubuk veya halka oluşturur.

“Bu yükseliyor mu”, “en yoğun ay hangisiydi”, “para nereye gidiyor” sorularını yanıtlar. Kullanıcının tam olarak okuması gereken bir değer için bunu bir tabloya yerleştirin.

Aylık sipariş sayısı4Ağu içinde, bu yılın en yükseği

MarNisMayHazTemAğu

Ekran görüntüsü değildir; tarayıcınızda SDK'nın kendi boyut ve renkleriyle canlı olarak çizilir.

Flutter SDK ve Web SDK ile, her ikisi de 0.1.0 sürümünden itibaren yerel olarak render edilir.

Ne zaman kullanılmamalı

Kullanıcının sayılara ihtiyacı olduğunda grafik kullanmayın. Telefon genişliğindeki altı noktalı bir çizgi ondalık basamağına kadar okunamaz; table ise okunabilir.

Tek bir değer için grafik kullanmayın; bunun için stat_group vardır. Bir üst sınıra karşı tek bir değer için de kullanmayın; bunun için progress vardır.

Türler

`kind`	Kullanım amacı
`line`	Bir trend.
`area`	Altındaki alan doldurulmuş bir çizgi; büyüklüğü önem taşıyan bir trend için.
`bar`	Dönemleri karşılaştırma.
`hbar`	Etiketleri solda yer alan yatay çubuklar; bir çubuğun altına sığmayacak kadar uzun etiketler için.
`stacked_bar`	Zaman içindeki bir toplamın parçaları için bir gösterge ile her sütunda yığılmış seriler.
`donut`	Bir toplamın payları. Halka grafik yalnızca ilk seriyi kullanır.

Flutter 0.44.0 ve Web 0.21.0 sürümlerinden itibaren area, hbar ve stacked_bar; daha eski bir derleme bunları bir çizgi olarak çizer.

unit (en fazla 12 karakter; örneğin “siparişler” veya “GB”), değerlerin neyi saydığını adlandırır.

Prop'lar

Her blok ayrıca type ve 1 ila 300 karakter uzunluğunda zorunlu bir fallback_text taşır.

Prop	Tür	Zorunlu	Kısıtlamalar
`kind`	`line` \| `bar` \| `donut` \| `area` \| `hbar` \| `stacked_bar`	Evet	Halka grafik yalnızca ilk seriyi kullanır.
`title`	string	Hayır	En fazla 120 karakter.
`labels`	string[]	Evet	Her biri en fazla 40 karakterlik 1 ila 24 dize.
`series`	array	Evet	1 ila 3 öğe.
`series[].name`	string	Hayır	En fazla 60 karakter. Çizgi ve çubuk grafiklerde birden fazla seri olduğunda ve her biri adlandırıldığında bir gösterge görünür; halka grafik ise bunun yerine dilimlerini kendi sütununda etiketler.
`series[].data`	number[]	Evet	1 ila 24 sayı.
`unit`	string	Hayır	En fazla 12 karakter.

Ağ üzerinde

{
  "id": "blk_06",
  "type": "chart",
  "fallback_text": "Orders a month rose from 1 in March to 4 in August.",
  "props": {
    "kind": "bar",
    "title": "Orders a month",
    "labels": [
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug"
    ],
    "series": [
      {
        "data": [
          1,
          0,
          2,
          1,
          2,
          4
        ]
      }
    ]
  }
}

Etkileşim

Yok. chart etkileşimli prop'lara sahip değildir: araç ipucu, gösterge açma/kapatma ve yakınlaştırma yoktur.

Durumlar

Durum	SDK'nın çizdiği
Yükleniyor	Gerçek çizim yüksekliğinde, çizim şeklinde bir yer tutucu barındıran bir plaka.
Boş	Tüm serileri boş olan bir grafik, boş bir ızgara yerine plaka içinde `fallback_text` oluşturur.
Düz veri	Her değer aynı olduğunda, sıfıra bölmek yerine eksen yine de bir aralığı kapsar.
Tek nokta	Tek noktalı bir çizgi grafik, görünmez bir yol yerine merkezde bir nokta çizer.
Sonlu olmayan değerler	Bir `NaN` veya sonsuzluk, ondan hesaplanan her ölçeği bozmak yerine seriden çıkarılır. Geriye hiçbir şey kalmayan bir seri grafikten düşer.
Çok sayıda dilim	Bir halka grafik, halkanın yanında en fazla altı dilim listeler ve “+N daha” satırıyla sonlanır. Renk örneği ve ad yalnızca her dilim etiketlendiğinde görünür; aksi takdirde sütun yalnızca yüzdelere indirgenir.

Erişilebilirlik

Bir grafik, ekran okuyucunun içeriğini okuyamadığı tek bloktur; bu nedenle fallback_text grafiğin kendisidir: bir grafiğin var olduğu gerçeğini değil, yönü ve uç noktaları belirtin (“Aylık siparişler mart ayındaki 1'den ağustos ayındaki 4'e yükseldi”). fallback_text eksikse SDK verilerin kendisinden bir açıklama üretir; bu bir alternatif değil, bir emniyet önlemidir.

Eksen etiketleri ve gösterge gerçek metindir ve okunabilir kalır; yalnızca çizimin yerini açıklama alır.

Renk nasıl atanır

Grafik bir göstergedir, bu nedenle vurgu renginizi taşımaz: vurgu rengi, okuyucunun aksiyon alabileceği öğelere ayrılmıştır. Tek serili bir çubuk grafik yumuşak mürekkeple çizilir ve tam mürekkep en yüksek noktayı, yani ilk okunmaya değer çubuğu işaretler. Gruplanmış çubuklar ve çizgi grafikler, serilerini renk tonuna göre değil, mürekkep ağırlığına göre birbirinden ayırır.

Halka grafik, tam mürekkepten aşağıya doğru tek bir ton geçişi uygular; bu nedenle ilk okunmaya değer dilimi dizinin başına koyun; böylece yirmi dilimli bir halka grafik hiçbir zaman uydurulmuş yirmi renge ihtiyaç duymaz. Yüzdeler en büyük kalan yöntemiyle hesaplanır, böylece gösterge sütununun toplamı tam olarak 100 eder.

Bu ton geçişindeki ardışık adımlar yaklaşık 1,64:1 oranında ayrışır; bu da birbirine komşu iki dilimi ayırt etmek için yeterli değildir ve tek renkli bir ton geçişi, hiç seçmediğiniz bir renk paleti uydurmadan buna daha fazla renkle yanıt veremez. Bu nedenle halka, bunun yerine her dilim çifti arasına plakanın kıl payı bir çizgisini çizer: bu yapısal bir sınırdır ve aynı zamanda WCAG 1.4.11'in bitişik metin dışı alanlar arasında talep ettiği şeydir. Bir dilim, boşluğun en az üç katı olana kadar tam yayını korur; çünkü ince bir dilimi tamamen kaybetmek, ayrımını kaybetmekten daha kötüdür.

Bu sayfada