Sankey Chart
Bir sankey grafiği: neyin nereden nereye, ne kadar aktığı. Düğümler kolonlarda durur; aralarında, akan miktar kadar geniş bantlar olarak akışlar uzanır: bir sitenin ziyaretçilerinin nereden gelip neye devam ettiği, bir bütçenin neyden oluşup neye harcandığı, bir santralin enerjisinin nereye vardığı.
import com.pantrixui.components.chart.sankey.PantrixSankeyChart
- Düğümler ve bağlantılar. Grafik düğümlerini (
SankeyNode) ve aralarındaki bağlantıları (SankeyLink) alır; bir bağlantı iki düğümünü anahtarlarıyla söyler. Aynı iki düğüm arasındaki bağlantılar tek bir akıştır. - Kolonlar. Kolonlar bağlantılardan çıkar: içine hiçbir şey akmayan düğüm ilk kolonda, ötekiler kendisine akanların sonuncusundan bir kolon ileride, dışına hiçbir şey akmayan düğüm son kolonda durur.
alignbirden çok kolonda durabilecek düğümün yerini seçer:Justify,Left,Right,Center. Bir kolonun düğümleri, akışları olabildiğince kesişmeyecek sıraya dizilir;order = SankeyOrder.Givenverildikleri sırada bırakır. - Ölçü. Bir düğüm, içine akanla dışına akanın büyüğü kadar yüksektir; bir bant, akan miktar kadar geniştir. Düğümün genişliği ve bir kolonun iki düğümü arası
ChartStyle'ınnodeWidth'i venodeGap'idir. - Gösterilen düğüm. İmlecin ya da parmağın üstünde durduğu düğüm bir halkayla işaretlenir, akışları belirginleşir, ötekiler soluklaşır. Tooltip düğümü ve her akışını, öbür ucundaki düğümün adıyla yazar. Klavyede oklar gösterdikleri yöndeki en yakın düğüme gider.
- Gösterilen akış. İmleç ya da parmak bir akışın üstündeyse akış belirginleşir, ötekiler soluklaşır ve tooltip iki düğümünü akış yönünde yazar ("Arama → Üye oldu"). Klavye düğümlerde kalır.
- Reddedilenler. Bir düğümden kendisine giden bağlantı, başladığı yere geri dönen bağlantılar ve grafikte olmayan bir düğümü söyleyen bağlantı reddedilir.
- Dışa aktarma.
exportgrafiğin üstüne bir düğme koyar: grafik ekrandaki hâliyle, gösterilen yer ve tooltip olmadan, PNG, SVG ya da PDF dosyası olarak üretilir ve uygulamaya verilir. - Otomasyon. Grafik
Sankey_<tagKey>, bir düğümSankey_<tagKey>.Node_<numara>olarak etiketlenir. Bir düğüme basış, düğümün anahtarıyla, bir akışa basış iki düğümünün anahtarıyla (kaynak>hedef) birselectolayı olarak bildirilir.
Örnekler
Ziyaretçiler nereden gelip nereye gidiyor
Üç kolon: ziyaretçilerin geldiği kaynaklar, sitede yaptıkları ve vardıkları son. Kolonları grafik bağlantılardan kendi çıkarır; bir kolonun düğümlerini de akışları kesişmesin diye kendi sıralar.
İmleci bir düğümün üstüne getir ya da düğüme dokun: düğümün akışları belirginleşir ve tooltip her birini öbür ucundaki düğümle birlikte yazar. Bir akışın üstünde yalnızca o akış belirginleşir ve tooltip onu iki düğümüyle yazar.
PantrixSankeyChart(
nodes = VISITOR_NODES,
links = VISITOR_LINKS,
modifier = Modifier.height(280.dp),
description = "Ziyaretçilerin geldiği kaynaklar, sitede yaptıkları ve vardıkları son",
tagKey = "plain"
)
private val VISITOR_NODES = listOf(
SankeyNode("search", "Arama"),
SankeyNode("social", "Sosyal"),
SankeyNode("direct", "Doğrudan"),
SankeyNode("signup", "Üye oldu"),
SankeyNode("browse", "Gezindi"),
SankeyNode("paid", "Ödedi"),
SankeyNode("free", "Ücretsiz kaldı"),
SankeyNode("left", "Ayrıldı")
)
private val VISITOR_LINKS = listOf(
SankeyLink("search", "signup", 300),
SankeyLink("search", "browse", 200),
SankeyLink("social", "signup", 100),
SankeyLink("social", "browse", 200),
SankeyLink("direct", "signup", 120),
SankeyLink("direct", "browse", 80),
SankeyLink("signup", "paid", 220),
SankeyLink("signup", "free", 300),
SankeyLink("browse", "free", 180),
SankeyLink("browse", "left", 300)
)
Gelir ve harcama
İki kolon: bir ayın gelirleri ve harcandıkları yerler. Tooltip'in değerleri kısa yazılıyor (ChartTooltip'in format'ı). Anahtarı çevir: düğümlerin adları kalkar (names = false) ve adlar yalnızca tooltip'te durur.
var named by remember { mutableStateOf(true) }
val strings = PantrixTheme.strings
PantrixSwitchButton(
checked = named,
onCheckedChange = { named = it },
label = "Düğüm adları",
tagKey = "sankey_names"
)
PantrixSankeyChart(
nodes = BUDGET_NODES,
links = BUDGET_LINKS,
names = named,
tooltip = ChartTooltip(format = { strings.compact(it) + " TL" }),
description = "Bir ayın gelirleri ve harcandıkları yerler",
tagKey = "budget"
)
private val BUDGET_NODES = listOf(
SankeyNode("salary", "Maaş"),
SankeyNode("extra", "Ek gelir"),
SankeyNode("rent", "Kira"),
SankeyNode("food", "Mutfak"),
SankeyNode("bills", "Faturalar"),
SankeyNode("saved", "Birikim")
)
private val BUDGET_LINKS = listOf(
SankeyLink("salary", "rent", 28_000),
SankeyLink("salary", "food", 16_000),
SankeyLink("salary", "bills", 9_000),
SankeyLink("salary", "saved", 12_000),
SankeyLink("extra", "saved", 8_000),
SankeyLink("extra", "food", 4_000)
)
Bir düğüme basmak
Bir basış, düğümü alır: anahtarı series'inde, adı name'inde, saydığı miktar value'sundadır. Bir akışa basış akışı alır: çıktığı düğümün anahtarı series'inde, vardığı düğümünkü x'inde. Bir düğüme ya da iki kolon arasında bir akışa bas: alttaki satır basılanı yazar.
var pressed by remember { mutableStateOf<String?>(null) }
PantrixSankeyChart(
nodes = VISITOR_NODES,
links = VISITOR_LINKS,
modifier = Modifier.height(280.dp),
onSelect = { pressed = "${it.name}: ${it.text} ziyaretçi" },
description = "Ziyaretçilerin geldiği kaynaklar, sitede yaptıkları ve vardıkları son",
tagKey = "press"
)
PantrixText(text = pressed ?: "Bir düğüme bas")
private val VISITOR_NODES = listOf(
SankeyNode("search", "Arama"),
SankeyNode("social", "Sosyal"),
SankeyNode("direct", "Doğrudan"),
SankeyNode("signup", "Üye oldu"),
SankeyNode("browse", "Gezindi"),
SankeyNode("paid", "Ödedi"),
SankeyNode("free", "Ücretsiz kaldı"),
SankeyNode("left", "Ayrıldı")
)
private val VISITOR_LINKS = listOf(
SankeyLink("search", "signup", 300),
SankeyLink("search", "browse", 200),
SankeyLink("social", "signup", 100),
SankeyLink("social", "browse", 200),
SankeyLink("direct", "signup", 120),
SankeyLink("direct", "browse", 80),
SankeyLink("signup", "paid", 220),
SankeyLink("signup", "free", 300),
SankeyLink("browse", "free", 180),
SankeyLink("browse", "left", 300)
)
Kolonların hizası ve sıra
Kolonların hizası (align). Reklamdan gelenler doğrudan ödemeye, aramadan gelenlerin bir kısmı hemen çıkışa akar: bu iki düğüm birden çok kolonda durabilir. "Yasla" dışına bir şey akmayanı son kolona, "Sola" olabildiğince öne, "Sağa" içine bir şey akmayanı olabildiğince geriye, "Ortala" içine bir şey akmayanı aktığı ilk düğümün bir önüne koyar. Anahtarı çevir: düğümler kolonda verildikleri sırada durur (order = SankeyOrder.Given).
var align by remember { mutableStateOf(SankeyAlign.Justify) }
var given by remember { mutableStateOf(false) }
PantrixSegmentButton(
options = SANKEY_ALIGNS,
selected = align,
onSelect = { align = it },
fullWidth = false,
tagKey = "sankey_align"
)
PantrixSwitchButton(
checked = given,
onCheckedChange = { given = it },
label = "Verildiği sırayla",
tagKey = "sankey_given"
)
PantrixSankeyChart(
nodes = ALIGN_NODES,
links = ALIGN_LINKS,
modifier = Modifier.height(260.dp),
align = align,
order = if (given) SankeyOrder.Given else SankeyOrder.Untangled,
description = "Ziyaretçilerin geldiği yerler ve vardıkları son",
tagKey = "align"
)
private val ALIGN_NODES = listOf(
SankeyNode("search", "Arama"),
SankeyNode("ads", "Reklam"),
SankeyNode("signup", "Üye oldu"),
SankeyNode("browse", "Gezindi"),
SankeyNode("left", "Ayrıldı"),
SankeyNode("paid", "Ödedi"),
SankeyNode("bounce", "Hemen çıktı")
)
private val ALIGN_LINKS = listOf(
SankeyLink("search", "signup", 300),
SankeyLink("search", "browse", 200),
SankeyLink("search", "bounce", 100),
SankeyLink("ads", "paid", 60),
SankeyLink("signup", "paid", 120),
SankeyLink("signup", "left", 180),
SankeyLink("browse", "left", 200)
)
private val SANKEY_ALIGNS = listOf(
SegmentOption(value = SankeyAlign.Justify, label = "Yasla", tagKey = "justify"),
SegmentOption(value = SankeyAlign.Left, label = "Sola", tagKey = "left"),
SegmentOption(value = SankeyAlign.Right, label = "Sağa", tagKey = "right"),
SegmentOption(value = SankeyAlign.Center, label = "Ortala", tagKey = "center")
)
Kendi ölçülerin
Düğümlerin kendi ölçüleri: daha geniş düğümler (nodeWidth) ve bir kolonun düğümleri arasında daha çok boşluk (nodeGap). Verilmeyen alan temanınki kalır.
PantrixSankeyChart(
nodes = BUDGET_NODES,
links = BUDGET_LINKS,
description = "Bir ayın gelirleri ve harcandıkları yerler",
style = ChartStyle(nodeWidth = 24.dp, nodeGap = 16.dp),
tagKey = "own_sizes"
)
private val BUDGET_NODES = listOf(
SankeyNode("salary", "Maaş"),
SankeyNode("extra", "Ek gelir"),
SankeyNode("rent", "Kira"),
SankeyNode("food", "Mutfak"),
SankeyNode("bills", "Faturalar"),
SankeyNode("saved", "Birikim")
)
private val BUDGET_LINKS = listOf(
SankeyLink("salary", "rent", 28_000),
SankeyLink("salary", "food", 16_000),
SankeyLink("salary", "bills", 9_000),
SankeyLink("salary", "saved", 12_000),
SankeyLink("extra", "saved", 8_000),
SankeyLink("extra", "food", 4_000)
)
Dışa aktarma
export = ChartExport(...) grafiğin üstüne bir dışa aktarma düğmesi koyar: bas ve türü seç (PNG, SVG ya da PDF). Grafik dosyayı üretir ve onExport'a verir; altta adı ve boyu, PNG ise resmi görünür, "Dosyayı kaydet" onu platformun yoluyla verir.
Dosyada düğümler, akışlar ve adlar durur; gösterilen akış ya da düğüm dosyada öne çıkmaz.
var file by remember { mutableStateOf<ChartExportFile?>(null) }
PantrixSankeyChart(
nodes = VISITOR_NODES,
links = VISITOR_LINKS,
modifier = Modifier.height(280.dp),
description = "Ziyaretçilerin geldiği kaynaklar, sitede yaptıkları ve vardıkları son",
tagKey = "exported",
export = ChartExport(fileName = "ziyaretciler") { file = it }
)
ExportedFile(file, tagKey = "exported")
private val VISITOR_NODES = listOf(
SankeyNode("search", "Arama"),
SankeyNode("social", "Sosyal"),
SankeyNode("direct", "Doğrudan"),
SankeyNode("signup", "Üye oldu"),
SankeyNode("browse", "Gezindi"),
SankeyNode("paid", "Ödedi"),
SankeyNode("free", "Ücretsiz kaldı"),
SankeyNode("left", "Ayrıldı")
)
private val VISITOR_LINKS = listOf(
SankeyLink("search", "signup", 300),
SankeyLink("search", "browse", 200),
SankeyLink("social", "signup", 100),
SankeyLink("social", "browse", 200),
SankeyLink("direct", "signup", 120),
SankeyLink("direct", "browse", 80),
SankeyLink("signup", "paid", 220),
SankeyLink("signup", "free", 300),
SankeyLink("browse", "free", 180),
SankeyLink("browse", "left", 300)
)
API
nodes
Bir sankey grafiği: neyin nereden nereye, ne kadar aktığı. Düğümler kolonlarda durur; aralarında, akan miktar kadar geniş bantlar olarak akışlar uzanır: bir sitenin ziyaretçilerinin nereden gelip neye devam ettiği, bir bütçenin neyden oluşup neye harcandığı, bir santralin enerjisinin nereye vardığı.
| Parametre | Tür | Varsayılan | Ne olduğu |
|---|---|---|---|
nodes | List<SankeyNode> | düğümler. Anahtarları onları ayırır; aynı anahtarı taşıyan iki düğüm reddedilir. | |
links | List<SankeyLink> | düğümler arasında akanlar: her biri bir düğümden ötekine, anahtarlarıyla. | |
modifier | Modifier | Modifier | grafiğin modifier'ı. Buradaki bir yükseklik grafiğindir. |
names | Boolean | true | her düğümün adının, yeri olduğunda, yanına yazılıp yazılmadığı. |
tooltip | ChartTooltip? | ChartTooltip() | gösterilen düğüm için gösterilen: adı ve saydığı miktar, altlarında da içine ve dışına akan her akış, öbür ucundaki düğümle. Değerleri format'ı yazar; shared ve crosshair okunmaz. null hiç göstermez. |
empty | (@Composable () -> Unit)? | null | grafiğin çizecek değeri yokken gösterdiği şey: temanın bunun için yazdığı sözün ("Veri yok") yerine; o zaman ekran okuyucuya da o söz söylenmez. null sözü yazar. |
state | ChartState | rememberChartState() | okuyucunun gösterdiği yer: verilmezse grafiğin kendisininki. |
description | String? | null | grafiğin ne gösterdiği, birkaç sözcükle, ekran okuyucu için: grafik hakkında söylediği ilk şey. Verilmezse grafik düğümlerinin adlarıyla duyurulur. |
onSelect | ((ChartPoint) -> Unit)? | null | basılan düğümle çağrılır: anahtarı series'i ve x'idir, adı name'i ve label'ı, value'su da saydığı miktardır; ve basılan akışla: çıktığı düğümün anahtarı series'i, vardığı düğümünkü x'idir, name'i iki düğümün adı, value'su da akan miktardır. |
style | ChartStyle? | null | bu grafiğin kendi geometrisi: burada verilen alanlar, gerisi temanınkiyle. Bir düğüm nodeWidth kadar geniştir, bir kolonun iki düğümünün arası bir nodeGap kadardır, bir düğümün köşeleri de barRadius'un söylediği kadar yuvarlaktır. |
colors | ChartColors? | null | bu grafiğin kendi renkleri, temanınkiler olmadıkları yerde. |
tagKey | String? | null | grafiğin otomasyon anahtarı: grafik Sankey_<tagKey>, düğümleri ve akışları birlikte Sankey_<tagKey>.Plot, bir düğüm birden sayılarak, kolon kolon ve her kolonda yukarıdan aşağı, Sankey_<tagKey>.Node_<number>, tooltip Sankey_<tagKey>.Tooltip'tir. Bir düğüme basış, düğümün anahtarıyla, bir akışa basış iki düğümünün anahtarlarıyla (from>to) bir Sankey select olayı olarak bildirilir. Değerlerden hiçbir şey bildirilmez. |
align | SankeyAlign | SankeyAlign.Justify | her düğümün, durabileceği kolonlardan hangisinde durduğu. |
order | SankeyOrder | SankeyOrder.Untangled | bir kolonun düğümlerinin dizildiği sıra: akışların kesişmesini önleyen sıra ya da verildikleri sıra. |
export | ChartExport? | null | grafiği uygulamanın dışına PNG, SVG ya da PDF olarak çıkarmayı sağlayan şey: grafiğin üstündeki bir düğme onun o anki hâlinin dosyasını üretip verir (bkz. ChartExport). null, grafikte böyle bir düğme yoktur. |
ChartStyle
Bir grafiğin geometrisi: hiçbir şey söylemediğinde ne kadar yüksek olduğu, çizgilerinin ne kadar kalın, işaretlerinin ne kadar büyük olduğu ve parçalarının arasındaki boşluk; ve dolgularının renklerinin yanında desen alıp almadığı.
| Parametre | Tür | Varsayılan | Ne olduğu |
|---|---|---|---|
height | Dp | Dp.Unspecified | Grafiğin modifier'ı ona bir yükseklik vermediğinde çizim alanının, eksenleriyle birlikte, ne kadar yüksek olduğu. Çizim alanının üstündeki ya da altındaki bir lejant kendi yüksekliğini ekler. |
lineWidth | Dp | Dp.Unspecified | Bir serinin çizgisinin kalınlığı. |
markerSize | Dp | Dp.Unspecified | Bir noktadaki işaretin genişliği ve yüksekliği. |
selectedMarkerSize | Dp | Dp.Unspecified | Aynısı, gösterilen noktadaki işaret için. |
gridWidth | Dp | Dp.Unspecified | Kılavuz çizgilerinin, eksenler boyunca çizilen çizgilerin ve gösterilen yeri işaretleyen çizginin kalınlığı. Sıfır hiçbirini çizmez. |
labelGap | Dp | Dp.Unspecified | Çizim alanıyla yanına ve altına yazılanın arası, ve onunla bir eksenin başlığının arası. |
tickSpacing | Dp | Dp.Unspecified | Değerlerin ekseni boyunca işaretlenen iki değerin arasındaki en az boşluk: eksen söylemediğinde kaç tanesinin işaretleneceğine karar veren şey. |
legendGap | Dp | Dp.Unspecified | Lejantla yanında durduğu grafiğin arası. |
legendItemGap | Dp | Dp.Unspecified | Lejantın bir kaydıyla sonrakinin arası. |
swatchSize | Dp | Dp.Unspecified | Bir serinin lejanttaki ve tooltip'teki örneğinin ne kadar geniş olduğu: çizgisinin kısa bir parçası ya da dolgusunun bir yaması. |
swatchGap | Dp | Dp.Unspecified | O örnekle ardındaki adın arası. |
tooltipShape | ShapeSpec | ShapeSpec.Unspecified | Tooltip'in köşeleri: markanın şekil ölçeğinin bir basamağı ya da sabit bir şekil. |
tooltipHorizontalPadding | Dp | Dp.Unspecified | Tooltip'in yanlarıyla içindekinin arası. |
tooltipVerticalPadding | Dp | Dp.Unspecified | Üstü ve altıyla içindekinin arası, ve başlığıyla satırlarının arası. |
tooltipGap | Dp | Dp.Unspecified | Gösterilen yerle yanındaki tooltip'in arası. |
tooltipElevation | Dp | Dp.Unspecified | Tooltip'in gölgesi. |
barGap | Dp | Dp.Unspecified | Bir yerde yan yana duran iki çubuğun arası. Bunun için fazla ince olan çubuklar daha yakın durur. |
barMaxWidth | Dp | Dp.Unspecified | Bir çubuğun en fazla ne kadar geniş olduğu, yerinin ne kadar yeri olursa olsun: üç yerli bir grafik üç kalas değildir. |
barRadius | Dp | Dp.Unspecified | Bir çubuğun ucunun, sıfırdan uzak ucunun, köşelerinin ne kadar yuvarlak olduğu. |
sliceGap | Dp | Dp.Unspecified | Bir pastanın yan yana duran iki dilimi arasında; pastanın ortasından kenarına kadar aynı genişlikte. |
selectedSliceOffset | Dp | Dp.Unspecified | Bir pastanın gösterilen diliminin, pastanın kenarından ne kadar dışarı taştığı. Pasta çevresinde bu kadar yer bırakır: dilimin duracağı yer olsun. |
gaugeWidth | Dp | Dp.Unspecified | Bir göstergenin yayının kalınlığı. Bir yay, yarıçapının yarısından kalın olmaz. |
meterHeight | Dp | Dp.Unspecified | Bir ölçüm grubunun çubuğunun yüksekliği. |
trackerHeight | Dp | Dp.Unspecified | Bir durum izleyicinin bloklarının yüksekliği. |
bubbleMinSize | Dp | Dp.Unspecified | Bir saçılım grafiğinin en küçük balonunun genişliği: büyüklüğü hiç olmayan ya da bir alan olarak görülemeyecek kadar az olan nokta da bir noktadır. |
bubbleMaxSize | Dp | Dp.Unspecified | En büyük balonunun genişliği: büyüklüğü grafiğin en büyüğü olanın. |
navigatorHeight | Dp | Dp.Unspecified | Zoom'unda gezgin şeridi olan bir grafikte, çizim alanının altındaki şeridin yüksekliği: grafiğin görünen kısmı onun üstünde işaretlenir ve kaydırılır. Yerleri yanından aşağı dizilen grafikte şerit çizim alanının yanında durur ve bu onun genişliğidir. |
barBandShare | Float | Float.NaN | Bir yerin çubuklarının bandından aldığı pay, sıfırdan çok ve en fazla bir: kalanı bir yerin çubuklarıyla sonrakininkiler arasındaki boşluktur. Çubuklar yine de barMaxWidth'ten geniş olmaz. |
markLineWidth | Dp | Dp.Unspecified | Bir işaretin çizgisinin kalınlığı: bir hedefin, bir sınırın, bir günün. Sıfır çizgi çizmez; işaretin yazısı yine yazılır. |
markBandAlpha | Float | Float.NaN | Bir işaretin bandının renginin ne kadarıyla çizildiği, sıfırdan bire: bant serilerin arkasında durur ve bir tondur. |
patterns | Boolean? | null | Bir grafiğin serilerinin, dilimlerinin ve karolarının dolgularının renklerinin yanında desenlerle, çizgilerinin de sırayla kesik çizilip çizilmediği (ChartPattern): renkleri ayırt edemeyen bir okuyucu için onları ayıran şey. Verilmezse sistemin ayarına uyulur: sistem şeyleri renksiz ayırt etmeye ayarlıysa açık (iOS'ta "Differentiate Without Color", Android'de renk düzeltme), değilse kapalı. |
nodeWidth | Dp | Dp.Unspecified | Bir sankey düğümünün ne kadar geniş olduğu. |
nodeGap | Dp | Dp.Unspecified | Bir sankey kolonunun iki düğümü arası. |
ChartColors
Temanın renklerini almayan bir grafik için, onun neyle boyandığı: verilen renk kullanılır, verilmeyen temanınki kalır.
| Parametre | Tür | Varsayılan | Ne olduğu |
|---|---|---|---|
series | List<Color> | emptyList() | Serilerin çizildiği renkler, dağıtıldıkları sırayla, kendi rengini söylemeyen seriler için. Boşsa temanın grafik renkleridir. |
grid | Color | Color.Unspecified | Bir eksenin işaretlerinde grafik boyunca çizilen çizgiler. Temanın divider'ı. |
axis | Color | Color.Unspecified | Bir eksen boyunca çizilen çizgi. Temanın border'ı. |
label | Color | Color.Unspecified | Eksenlerin yanına yazılanlar: değerler, yerler ve eksenlerin başlıkları, bir de lejanttaki adlar. Temanın textSecondary'si. |
crosshair | Color | Color.Unspecified | Gösterilen yeri işaretleyen çizgi. Temanın borderHover'ı: içinden geçtiği kılavuz çizgilerinden güçlü, arkasında durduğu serilerden sessiz. |
tooltipContainer | Color | Color.Unspecified | Tooltip'in dolgusu. Temanın surface'i. |
tooltipBorder | Color | Color.Unspecified | Tooltip'in kenarı. Temanın border'ı. |
tooltipText | Color | Color.Unspecified | Tooltip'in başlığı ve değerleri. Temanın textPrimary'si. |
tooltipLabel | Color | Color.Unspecified | Tooltip'teki seri adları. Temanın textSecondary'si. |
rising | Color | Color.Unspecified | Yukarı giden bir değerin çizildiği renk: bir şelalenin ekleyen adımı. Temanın success'i. |
falling | Color | Color.Unspecified | Aşağı giden bir değerin çizildiği renk: bir şelalenin götüren adımı. Temanın danger'ı. |
Erişilebilirlik
- Ekran okuyucu. Önce grafiğin açıklaması, sonra kolon kolon her düğüm: saydığı miktar ve her akışı, nereden geldiği ya da nereye gittiğiyle.