Line Chart

Bir kez verilen satırlardan bir çizgi grafiği: onlardan okunan values'ın her biri için bir çizgi, x'in onlardan okuduğu yerler boyunca.

import com.pantrixui.components.chart.line.PantrixLineChart

• Satırlar ve değerler. data satırları, x bir satırın yerini verir. Her ChartValue bir seridir: anahtarı, adı ve satırdan değerini okuyan fonksiyonu.
• Çizginin gidişi. curve çizginin bir noktadan ötekine nasıl gittiğini söyler: düz, yumuşak ya da basamaklı. Yumuşak çizgi iki noktanın arasında kalır; değerlerin sahip olmadığı bir tepe ya da çukur göstermez.
• Renkten fazlası. Bir serinin dash'i çizgisini kesik ya da noktalı çizer, marker'ı noktalarına bir şekil koyar. İkisi de lejantta ve tooltip'te serinin örneğinde görünür.
• Eksik değerler. missing, değeri olmayan satırda çizginin ne yapacağını söyler: keser, birleştirir ya da sıfır sayar.
• Sayı ekseni. Yerler sayıysa ve xAxis = ChartAxis(numeric = true) ise noktalar sayıları kadar aralıklı durur ve eksen yuvarlak sayılara işaretlenir; verilmezse sayılar da birer addır, eşit aralıklarla dizilir.
• Değer etiketleri ve işaretler. labels değerleri noktaların üstüne yazar; marks bir hedef çizgisini ya da bir aralığın bandını çizer.
• Ne zaman `PantrixChart`. Serileri farklı listelerden gelen, farklı türden olan ya da ikinci bir eksenle okunan bir grafik için: her seri kendi LineSeries'ini alır.
• Otomasyon. Grafik, olduğu PantrixChart gibi etiketlenir: Chart_<tagKey>.

Örnekler

Aynı satırlardan çizgiler

En yalın hâli: satırlar, satırın yerini veren x ve her seri için bir ChartValue. Seri, anahtarını ve adını alır; sondaki blok satırdan değerini okur.

Üç seri temanın ilk üç grafik rengini alır. Lejanttaki bir ada bas: seri çıkar, kalanlar renklerini korur.

PantrixLineChart(
    data = TRAFFIC,
    x = { it.day },
    values = listOf(
        ChartValue("search", "Arama") { it.search },
        ChartValue("direct", "Doğrudan") { it.direct },
        ChartValue("social", "Sosyal") { it.social }
    ),
    description = "Haftanın günlerine göre ziyaretin üç kaynağı",
    tagKey = "plain"
)

private data class Traffic(
    val day: String,
    val search: Int,
    val direct: Int,
    val social: Int
)

private val TRAFFIC = listOf(
    Traffic("Pzt", search = 420, direct = 240, social = 130),
    Traffic("Sal", search = 480, direct = 260, social = 120),
    Traffic("Çar", search = 455, direct = 300, social = 165),
    Traffic("Per", search = 530, direct = 280, social = 190),
    Traffic("Cum", search = 510, direct = 330, social = 240),
    Traffic("Cmt", search = 360, direct = 210, social = 310),
    Traffic("Paz", search = 330, direct = 180, social = 285)
)

Sayı ekseni

Bir yürüyüş yolunun yüksekliği, yol üzerinde düzensiz aralıklarla ölçülmüş: yerler kilometre olarak birer sayı. xAxis = ChartAxis(numeric = true) ile noktalar sayıları kadar aralıklı durur: 0,8 km ile 1,2 km birbirine yakın, 7,5 km ile 11 km uzak; eksen yuvarlak kilometrelere işaretlenir ve yazımını format verir. Zirvenin çizgisi bir ölçümün yerinde değil, 9,6 km'de duruyor.

Anahtarı kapat: sayılar birer ad olur ve eşit aralıklarla dizilir; yolun dikliği yanlış okunur.

var numeric by remember { mutableStateOf(true) }
val strings = PantrixTheme.strings
PantrixSwitchButton(
    checked = numeric,
    onCheckedChange = { numeric = it },
    label = "Sayı ekseni",
    tagKey = "line_numeric"
)
PantrixLineChart(
    data = TRAIL,
    x = { it.first },
    values = listOf(ChartValue("height", "Yükseklik (m)") { it.second }),
    curve = ChartCurve.Smooth,
    xAxis = ChartAxis(numeric = numeric, format = { "${strings.decimal(it)} km" }),
    marks = listOf(ChartReferenceLine(x = 9.6, label = "Zirve")),
    description = "Bir yürüyüş yolunun, yol boyunca ölçülen yüksekliği",
    tagKey = "numeric"
)

private val TRAIL = listOf(
    0.0 to 420,
    0.8 to 455,
    1.2 to 470,
    2.5 to 560,
    4.0 to 610,
    7.5 to 820,
    9.6 to 1_040,
    11.0 to 930,
    12.4 to 780
)

Çizginin gidişi

curve çizginin bir noktadan ötekine nasıl gittiğini söyler. Linear düz gider. Smooth noktalardan yuvarlak geçer ama onların arasında kalır: bir tepe ya da çukur uydurmaz. Basamaklı olanlar değeri bir noktadan ötekine düz taşır: StepAfter değer değişene kadar yerinde durur, bir stok ya da bir fiyat gibi; StepBefore bir sonraki değere önceden geçer; Step ikisinin ortasında basamak atar.

var curve by remember { mutableStateOf(ChartCurve.Smooth) }
PantrixSegmentButton(
    options = CURVES,
    selected = curve,
    onSelect = { curve = it },
    fullWidth = false,
    tagKey = "curve"
)
PantrixLineChart(
    data = TRAFFIC,
    x = { it.day },
    values = listOf(ChartValue("search", "Arama", marker = ChartMarker.Circle) { it.search }),
    curve = curve,
    description = "Haftanın günlerine göre aramadan gelen ziyaret",
    tagKey = "curves"
)

private data class Traffic(
    val day: String,
    val search: Int,
    val direct: Int,
    val social: Int
)

private val TRAFFIC = listOf(
    Traffic("Pzt", search = 420, direct = 240, social = 130),
    Traffic("Sal", search = 480, direct = 260, social = 120),
    Traffic("Çar", search = 455, direct = 300, social = 165),
    Traffic("Per", search = 530, direct = 280, social = 190),
    Traffic("Cum", search = 510, direct = 330, social = 240),
    Traffic("Cmt", search = 360, direct = 210, social = 310),
    Traffic("Paz", search = 330, direct = 180, social = 285)
)

private val CURVES = listOf(
    SegmentOption(value = ChartCurve.Linear, label = "Düz", tagKey = "linear"),
    SegmentOption(value = ChartCurve.Smooth, label = "Yumuşak", tagKey = "smooth"),
    SegmentOption(value = ChartCurve.Step, label = "Basamak", tagKey = "step"),
    SegmentOption(value = ChartCurve.StepBefore, label = "Önce", tagKey = "before"),
    SegmentOption(value = ChartCurve.StepAfter, label = "Sonra", tagKey = "after")
)

Renkten fazlasıyla ayrılan seriler

Renk tek başına her okuyucuya yetmez: kırmızıyla yeşili ayırmayan bir göze, siyah beyaz bir çıktıya, çok serili bir grafiğe. Burada her seri renginden fazlasıyla da ayrılıyor: biri düz çizgi ve daire, biri kesik çizgi ve kare, biri noktalı çizgi ve üçgen.

Aynı örnek lejantta ve tooltip'te de durur: seri orada da çizgisiyle ve şekliyle tanınır.

PantrixLineChart(
    data = TRAFFIC,
    x = { it.day },
    values = listOf(
        ChartValue("search", "Arama", marker = ChartMarker.Circle) { it.search },
        ChartValue("direct", "Doğrudan", dash = ChartDash.Dashed, marker = ChartMarker.Square) { it.direct },
        ChartValue("social", "Sosyal", dash = ChartDash.Dotted, marker = ChartMarker.Triangle) { it.social }
    ),
    description = "Haftanın günlerine göre ziyaretin üç kaynağı",
    tagKey = "told_apart"
)

private data class Traffic(
    val day: String,
    val search: Int,
    val direct: Int,
    val social: Int
)

private val TRAFFIC = listOf(
    Traffic("Pzt", search = 420, direct = 240, social = 130),
    Traffic("Sal", search = 480, direct = 260, social = 120),
    Traffic("Çar", search = 455, direct = 300, social = 165),
    Traffic("Per", search = 530, direct = 280, social = 190),
    Traffic("Cum", search = 510, direct = 330, social = 240),
    Traffic("Cmt", search = 360, direct = 210, social = 310),
    Traffic("Paz", search = 330, direct = 180, social = 285)
)

Eksensiz, küçük bir çizgi

Bir kartın köşesindeki küçük bir çizgi: eksenleri ve lejantı yok (null), yüksekliği altmış dp. Değerleri yine yerinde durur: imleçle ya da parmakla gösterilen günün değeri tooltip'te okunur, ekran okuyucu günleri tek tek söyler.

Ekseni olmayan grafik, değerlerinin nasıl yazılacağını tooltip'ine söyler (ChartTooltip.format): burada sayının ardına neyin sayısı olduğu ekleniyor.

val strings = PantrixTheme.strings
PantrixLineChart(
    data = TRAFFIC,
    x = { it.day },
    values = listOf(ChartValue("search", "Arama") { it.search }),
    modifier = Modifier.height(60.dp),
    curve = ChartCurve.Smooth,
    xAxis = null,
    yAxis = null,
    tooltip = ChartTooltip(format = { "${strings.decimal(it)} ziyaret" }),
    description = "Haftanın günlerine göre aramadan gelen ziyaret",
    tagKey = "bare"
)

private data class Traffic(
    val day: String,
    val search: Int,
    val direct: Int,
    val social: Int
)

private val TRAFFIC = listOf(
    Traffic("Pzt", search = 420, direct = 240, social = 130),
    Traffic("Sal", search = 480, direct = 260, social = 120),
    Traffic("Çar", search = 455, direct = 300, social = 165),
    Traffic("Per", search = 530, direct = 280, social = 190),
    Traffic("Cum", search = 510, direct = 330, social = 240),
    Traffic("Cmt", search = 360, direct = 210, social = 310),
    Traffic("Paz", search = 330, direct = 180, social = 285)
)

API

data

Bir kez verilen satırlardan bir çizgi grafiği: onlardan okunan values'ın her biri için bir çizgi, x'in onlardan okuduğu yerler boyunca.

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ığı.

ChartColors

Temanın renklerini almayan bir grafik için, onun neyle boyandığı: verilen renk kullanılır, verilmeyen temanınki kalır.