Polar Chart
Bir polar grafik: bir ortanın çevresine dizilmiş çubuklar, her biri ortadan dışarı değeri kadar uzun: bir gül. Dönüp gelen şeylere yakışır, günün saatleri, yılın ayları, pusulanın yönleri; ve hangisinin ne kadar uzandığı bir bakışta karşılaştırılacak olana.
import com.pantrixui.components.chart.polar.PantrixPolarChart- Yan yana ve üst üste. Birkaç serinin çubukları bir dilimde yan yana durur; aynı
stack'i söyleyen seriler orada tek bir çubuğu paylaşır, her biri bir öncekinin dışında. - Ortadaki boşluk.
holeile çubuklar bir halkadan başlar: en kısası da görünür. En çok yarıçapın onda dokuzu. - Halkalar. Değer halkaları yuvarlaktır: çubukların ucu da öyledir ve onlara göre okunur.
grid = RadarGrid.Polygonile halkalar bir dilimin kenarından ötekine düz çizilir, çubukların ucu da düz olur. İşaretli değerler ilk dilimin başındaki çizginin üstüne, çubukların üzerine yazılır. - Dolgu.
fillAlpha, bir serinin çubuklarının renginin ne kadarıyla doldurulacağını söyler: birden azında arkadaki halkalar görünür. Lejant ve tooltip rengin tamamını gösterir. - Eksenler.
xAxisdilimlerdir: adları (labels,label) ve aralarındaki çizgiler (line).yAxisdeğer eksenidir: uçları, işaretlenen değer sayısı, yazımı, değerler (labels) ve halkalar (grid). - Gösterilen dilim. İmlecin üstünde olduğu ya da dokunulan dilim gölgelenir ve tooltip serilerin oradaki değerlerini yazar.
- Yön. Grafik sağdan sola okunan dilde de aynı yöne döner.
- 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.
PolarChart_<tagKey>; çizim alanı.Plot, dilimler.Point_<sıra>, lejant kayıtları.Legend_<seri>, tooltip.Tooltip.
Örnekler
Günün saatleri
Bir mağazanın günün saatlerine göre ziyaretçisi, ikişer saatlik dilimlerle. Ortada bir boşluk var (hole): gece saatlerinin kısa çubukları da görünür.
İmleci bir dilimin üstüne getir ya da dokun: dilim gölgelenir ve tooltip o saatlerin ziyaretçisini yazar.
PantrixPolarChart(
series = listOf(PolarSeries("visits", "Ziyaret", shopHours(), x = { it.hours }, y = { it.weekday })),
hole = 0.25f,
description = "Saatlere göre ziyaret",
tagKey = "plain"
)
internal fun shopHours(): List<ShopHours> = listOf(
ShopHours("00", weekday = 4, weekend = 9, online = 12),
ShopHours("02", weekday = 2, weekend = 5, online = 7),
ShopHours("04", weekday = 2, weekend = 3, online = 4),
ShopHours("06", weekday = 8, weekend = 4, online = 6),
ShopHours("08", weekday = 26, weekend = 12, online = 14),
ShopHours("10", weekday = 41, weekend = 30, online = 22),
ShopHours("12", weekday = 58, weekend = 47, online = 27),
ShopHours("14", weekday = 46, weekend = 62, online = 25),
ShopHours("16", weekday = 52, weekend = 70, online = 29),
ShopHours("18", weekday = 63, weekend = 55, online = 38),
ShopHours("20", weekday = 35, weekend = 41, online = 44),
ShopHours("22", weekday = 14, weekend = 24, online = 30)
)
internal class ShopHours(
val hours: String,
val weekday: Int,
val weekend: Int,
val online: Int
)Yan yana iki seri
Hafta içi ve hafta sonu, her dilimde yan yana: aynı saatlerde iki günün farkı okunur.
val hours = shopHours()
PantrixPolarChart(
series = listOf(
PolarSeries("weekday", "Hafta içi", hours, x = { it.hours }, y = { it.weekday }),
PolarSeries("weekend", "Hafta sonu", hours, x = { it.hours }, y = { it.weekend })
),
hole = 0.25f,
description = "Saatlere göre ziyaret, hafta içi ve hafta sonu",
tagKey = "grouped"
)
internal fun shopHours(): List<ShopHours> = listOf(
ShopHours("00", weekday = 4, weekend = 9, online = 12),
ShopHours("02", weekday = 2, weekend = 5, online = 7),
ShopHours("04", weekday = 2, weekend = 3, online = 4),
ShopHours("06", weekday = 8, weekend = 4, online = 6),
ShopHours("08", weekday = 26, weekend = 12, online = 14),
ShopHours("10", weekday = 41, weekend = 30, online = 22),
ShopHours("12", weekday = 58, weekend = 47, online = 27),
ShopHours("14", weekday = 46, weekend = 62, online = 25),
ShopHours("16", weekday = 52, weekend = 70, online = 29),
ShopHours("18", weekday = 63, weekend = 55, online = 38),
ShopHours("20", weekday = 35, weekend = 41, online = 44),
ShopHours("22", weekday = 14, weekend = 24, online = 30)
)
internal class ShopHours(
val hours: String,
val weekday: Int,
val weekend: Int,
val online: Int
)Üst üste
Aynı stack'i söyleyen iki seri her dilimde tek bir çubuğu paylaşır: çubuğun tamamı toplamı, parçaları kimden geldiğini gösterir.
val hours = shopHours()
PantrixPolarChart(
series = listOf(
PolarSeries("store", "Mağaza", hours, x = { it.hours }, y = { it.weekday }, stack = "all"),
PolarSeries("online", "İnternet", hours, x = { it.hours }, y = { it.online }, stack = "all")
),
description = "Saatlere göre ziyaret, mağaza ve internet",
tagKey = "stacked"
)
internal fun shopHours(): List<ShopHours> = listOf(
ShopHours("00", weekday = 4, weekend = 9, online = 12),
ShopHours("02", weekday = 2, weekend = 5, online = 7),
ShopHours("04", weekday = 2, weekend = 3, online = 4),
ShopHours("06", weekday = 8, weekend = 4, online = 6),
ShopHours("08", weekday = 26, weekend = 12, online = 14),
ShopHours("10", weekday = 41, weekend = 30, online = 22),
ShopHours("12", weekday = 58, weekend = 47, online = 27),
ShopHours("14", weekday = 46, weekend = 62, online = 25),
ShopHours("16", weekday = 52, weekend = 70, online = 29),
ShopHours("18", weekday = 63, weekend = 55, online = 38),
ShopHours("20", weekday = 35, weekend = 41, online = 44),
ShopHours("22", weekday = 14, weekend = 24, online = 30)
)
internal class ShopHours(
val hours: String,
val weekday: Int,
val weekend: Int,
val online: Int
)Düz halkalar
Düz halkalar (RadarGrid.Polygon): her halka bir dilimin kenarından ötekine düz, çubukların ucu da düz ve halkasının çizgisine oturur. Çubuklar renklerinin yüzde altmışıyla dolu (fillAlpha): arkalarındaki halkalar görünür.
PantrixPolarChart(
series = listOf(
PolarSeries("visits", "Ziyaret", shopHours(), x = { it.hours }, y = { it.weekday }, fillAlpha = 0.6f)
),
hole = 0.25f,
grid = RadarGrid.Polygon,
description = "Saatlere göre ziyaret",
tagKey = "polygon"
)
internal fun shopHours(): List<ShopHours> = listOf(
ShopHours("00", weekday = 4, weekend = 9, online = 12),
ShopHours("02", weekday = 2, weekend = 5, online = 7),
ShopHours("04", weekday = 2, weekend = 3, online = 4),
ShopHours("06", weekday = 8, weekend = 4, online = 6),
ShopHours("08", weekday = 26, weekend = 12, online = 14),
ShopHours("10", weekday = 41, weekend = 30, online = 22),
ShopHours("12", weekday = 58, weekend = 47, online = 27),
ShopHours("14", weekday = 46, weekend = 62, online = 25),
ShopHours("16", weekday = 52, weekend = 70, online = 29),
ShopHours("18", weekday = 63, weekend = 55, online = 38),
ShopHours("20", weekday = 35, weekend = 41, online = 44),
ShopHours("22", weekday = 14, weekend = 24, online = 30)
)
internal class ShopHours(
val hours: String,
val weekday: Int,
val weekend: Int,
val online: Int
)Kendi görünüşü
Bir grafiğin kendi görünüşü: çubukların arası daha açık (sliceGap), dilimlerin arasında çizgi yok (xAxis'in line'ı) ve eksen dört değer işaretler (yAxis'in ticks'i). Verilmeyen alan temanınki kalır.
PantrixPolarChart(
series = listOf(PolarSeries("visits", "Ziyaret", shopHours(), x = { it.hours }, y = { it.weekend })),
xAxis = ChartAxis(line = false),
yAxis = ChartAxis(ticks = 4),
description = "Hafta sonu, saatlere göre ziyaret",
style = ChartStyle(sliceGap = 6.dp),
tagKey = "own_look"
)
internal fun shopHours(): List<ShopHours> = listOf(
ShopHours("00", weekday = 4, weekend = 9, online = 12),
ShopHours("02", weekday = 2, weekend = 5, online = 7),
ShopHours("04", weekday = 2, weekend = 3, online = 4),
ShopHours("06", weekday = 8, weekend = 4, online = 6),
ShopHours("08", weekday = 26, weekend = 12, online = 14),
ShopHours("10", weekday = 41, weekend = 30, online = 22),
ShopHours("12", weekday = 58, weekend = 47, online = 27),
ShopHours("14", weekday = 46, weekend = 62, online = 25),
ShopHours("16", weekday = 52, weekend = 70, online = 29),
ShopHours("18", weekday = 63, weekend = 55, online = 38),
ShopHours("20", weekday = 35, weekend = 41, online = 44),
ShopHours("22", weekday = 14, weekend = 24, online = 30)
)
internal class ShopHours(
val hours: String,
val weekday: Int,
val weekend: Int,
val online: Int
)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 halkalar, saatler ve dilimler durur.
var file by remember { mutableStateOf<ChartExportFile?>(null) }
PantrixPolarChart(
series = listOf(PolarSeries("visits", "Ziyaret", shopHours(), x = { it.hours }, y = { it.weekday })),
hole = 0.25f,
description = "Saatlere göre ziyaret",
tagKey = "exported",
export = ChartExport(fileName = "saatler") { file = it }
)
ExportedFile(file, tagKey = "exported")
internal fun shopHours(): List<ShopHours> = listOf(
ShopHours("00", weekday = 4, weekend = 9, online = 12),
ShopHours("02", weekday = 2, weekend = 5, online = 7),
ShopHours("04", weekday = 2, weekend = 3, online = 4),
ShopHours("06", weekday = 8, weekend = 4, online = 6),
ShopHours("08", weekday = 26, weekend = 12, online = 14),
ShopHours("10", weekday = 41, weekend = 30, online = 22),
ShopHours("12", weekday = 58, weekend = 47, online = 27),
ShopHours("14", weekday = 46, weekend = 62, online = 25),
ShopHours("16", weekday = 52, weekend = 70, online = 29),
ShopHours("18", weekday = 63, weekend = 55, online = 38),
ShopHours("20", weekday = 35, weekend = 41, online = 44),
ShopHours("22", weekday = 14, weekend = 24, online = 30)
)
internal class ShopHours(
val hours: String,
val weekday: Int,
val weekend: Int,
val online: Int
)API
series
Bir polar grafik: bir ortanın çevresine dizilmiş çubuklar, her biri ortadan dışarı değeri kadar uzun: bir gül. Dönüp gelen şeylere yakışır, günün saatleri, yılın ayları, pusulanın yönleri; ve hangisinin ne kadar uzandığı bir bakışta karşılaştırılacak olana.
| Parametre | Tür | Varsayılan | Ne olduğu |
|---|---|---|---|
series | List<PolarSeries<*>> | seriler, çizildikleri ve listelendikleri sırayla. Anahtarları onları birbirinden ayırır; aynı anahtarlı iki seri reddedilir. | |
modifier | Modifier | Modifier | grafiğin modifier'ı. Buradaki bir yükseklik grafiğindir, lejantınki de içinde. |
hole | Float | 0f | grafiğin yarıçapının ne kadarının ortasından kesilip çıkarıldığı: ortadan başlayan çubuklar için sıfır. En çok onda dokuz. |
xAxis | ChartAxis? | ChartAxis() | dilimler: adlarının grafiğin çevresine yazılıp yazılmadığı (labels), bir adın nasıl yazıldığı (label) ve bir dilim ile sonraki arasına çizgi çizilip çizilmediği (line). null onlardan hiçbir şey çizmez. |
yAxis | ChartAxis? | ChartAxis() | değerlerin ekseni, grafiğin ortasından dışarı: uçları, yaklaşık kaç değer işaretlediği, bir değerin nasıl yazıldığı, işaretli değerlerin yazılıp yazılmadığı (labels) ve her birinde bir halka çizilip çizilmediği (grid). startFromZero ya da min başka söylemedikçe sıfırdan başlar. null ondan hiçbir şey çizmez. |
legend | ChartLegend? | ChartLegend() | serilerin adlarının durduğu yer. null hiç göstermez. |
tooltip | ChartTooltip? | ChartTooltip() | gösterilen dilim için gösterilen. 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 gizledikleri ve 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 serilerinin adlarıyla duyurulur. |
onSelect | ((ChartPoint) -> Unit)? | null | basılan değerle çağrılır: gösterilen değer, ya da dilimin değerleri birlikte gösteriliyorsa çubuğu basışa en yakın olan serinin değeri. |
style | ChartStyle? | null | bu grafiğin kendi geometrisi: burada verilen alanlar, gerisi için temanınkiler. |
colors | ChartColors? | null | bu grafiğin kendi renkleri, temanınkiler olmadıkları yerde. |
tagKey | String? | null | grafiğin otomasyon anahtarı: grafik PolarChart_<tagKey>, çizim alanı PolarChart_<tagKey>.Plot, bir dilimi birden sayılarak PolarChart_<tagKey>.Point_<number>, bir serinin lejant kaydı PolarChart_<tagKey>.Legend_<series' key> ve tooltip PolarChart_<tagKey>.Tooltip olur. Bir değere basış, serinin anahtarıyla bir PolarChart select olayı olarak, bir lejant kaydına basış da anahtarla ve serinin gösterilip gösterilmediğiyle bir toggle olayı olarak bildirilir. Değerlerden hiçbir şey bildirilmez. |
grid | RadarGrid | RadarGrid.Circle | halkaların nasıl çizildiği: yuvarlak, ya da bir dilimin bir kenarından ötekine düz, bir ağ; ağın çubukları onun çizgilerinde düz biter ve onlara göre okunur. Üçten az dilimi olan grafiğin halkaları her iki durumda da yuvarlaktır. |
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
- Klavye. Grafik, Tab için tek duraktır: oklar dilimden dilime grafiğin çevresinde döner, sondan sonra başa gelir; Home ve End ilk ve son dilime gider, Escape bırakır, Enter ve boşluk gösterilen değere basar.
- Ekran okuyucu. Grafik
description'ını, ardından her dilimi serilerin oradaki değerleriyle söyler.