Grafikler

79 · Grafikler

ApexCharts ile çizilen grafik. options dizisi ApexCharts yapılandırmasının PHP karşılığıdır; karanlık temada eksen, ızgara ve ipucu renkleri kendiliğinden uyarlanır ve tema değişince grafik yeniden boyanır.

PRO acun:chart

Temel kullanım

Grafik türünü chart.type, verileri series, eksen etiketlerini xaxis.categories ile verin. ApexCharts araç çubuğu varsayılan olarak gizlidir ve grafik sayfanın yazı tipini kullanır.

CANLI ÖRNEK

<acun:chart :options="[
    'chart' => ['type' => 'area'],
    'series' => [['name' => 'Sipariş', 'data' => [2810, 2944, 3012, 2890, 3240, 3106]]],
    'xaxis' => ['categories' => ['Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl']],
    'colors' => ['primary'],
    'stroke' => ['curve' => 'smooth', 'width' => 3],
    'fill' => ['type' => 'gradient', 'gradient' => ['opacityFrom' => 0.4, 'opacityTo' => 0.05]],
    'dataLabels' => ['enabled' => false],
]" />

Prop	Değerler
`options`	ApexCharts yapılandırması
`colors`	Seri renkleri: palet adları (primary, secondary, success, danger, warning, info, dark) ya da renk değerleri; verilmezse palet sırası

Çizgi ve sütun

Aynı yapıyla line ve bar gibi diğer ApexCharts türleri çizilir. Birden fazla seriyi series dizisine ekleyin; her seri kendi rengini colors içindeki sırasından alır.

CANLI ÖRNEK

<acun:chart :height="300" :options="[
    'chart' => ['type' => 'line'],
    'series' => [['name' => 'Web', 'data' => [96, 110, 104, 120, 118, 112]], ['name' => 'Mobil', 'data' => [40, 44, 52, 49, 58, 61]]],
    'xaxis' => ['categories' => ['Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl']],
    'colors' => ['primary', 'info'],
    'stroke' => ['width' => 3],
]" />
<acun:chart :height="300" :options="[
    'chart' => ['type' => 'bar'],
    'series' => [['name' => 'Sipariş', 'data' => [412, 388, 295, 176, 142]]],
    'xaxis' => ['categories' => ['İstanbul', 'Ankara', 'İzmir', 'Bursa', 'Antalya']],
    'colors' => ['primary'],
    'plotOptions' => ['bar' => ['borderRadius' => 4, 'columnWidth' => '45%']],
    'dataLabels' => ['enabled' => false],
]" />

Prop	Değerler
`chart.type`	area \| line \| bar \| donut \| pie \| radialBar …

Halka grafik

Halka ve pasta grafiklerinde series düz bir sayı dizisidir, dilim adları labels ile verilir. Kalan ya da boş dilim için #e5e7eb kullanın: karanlık temada bu renk kendiliğinden koyu griye (#474747) çevrilir.

CANLI ÖRNEK

<acun:chart :height="300" :options="[
    'chart' => ['type' => 'donut'],
    'series' => [3106, 214, 96],
    'labels' => ['Teslim edildi', 'Yolda', 'İade'],
    'colors' => ['success', 'warning', 'danger'],
    'legend' => ['position' => 'bottom'],
]" />
<acun:chart :height="300" :options="[
    'chart' => ['type' => 'donut'],
    'series' => [74, 26],
    'labels' => ['Tamamlanan', 'Kalan'],
    'colors' => ['primary', '#e5e7eb'],
    'legend' => ['position' => 'bottom'],
    'dataLabels' => ['enabled' => false],
]" />

Prop	Değerler
`series`	Sayı dizisi
`labels`	Dilim adları
`#e5e7eb`	Karanlık temada #474747 olur

Yükseklik

Yüksekliği height ile piksel olarak verin; varsayılan 280'dir. Grafik çizilene kadar kapsayıcı bu yükseklikte yer tutar, böylece sayfa kaymaz. Kartlardaki küçük grafikler için ApexCharts'ın sparkline seçeneğiyle eksenleri gizleyin.

CANLI ÖRNEK

<acun:card>
    <p class="text-sm text-gray-500 dark:text-zinc-400">Haftalık sipariş</p>
    <p class="text-2xl font-semibold text-gray-900 dark:text-zinc-100">742</p>
    <acun:chart :height="80" :options="[
        'chart' => ['type' => 'area', 'sparkline' => ['enabled' => true]],
        'series' => [['name' => 'Sipariş', 'data' => [96, 104, 99, 118, 112, 107, 106]]],
        'colors' => ['success'],
        'stroke' => ['curve' => 'smooth', 'width' => 2],
    ]" />
</acun:card>

Prop	Değerler
`height`	Piksel (varsayılan 280)

Kurulum

ApexCharts pakete dahil değildir; uygulamanızda kurup, PRO JS girişi @acunsoft/acun-ui-pro (CSS, JavaScript ve derleme kılavuzundaki Vite takma adı) üzerinden registerChart ile tanıtın. Grafik wire:ignore içinde çizildiği için Livewire güncellemelerinde yeniden oluşturulmaz.

import ApexCharts from 'apexcharts';
import { registerChart } from '@acunsoft/acun-ui-pro';

document.addEventListener('livewire:init', () => registerChart(Alpine, ApexCharts));

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`options`	`[]`	ApexCharts yapılandırması (chart, series, xaxis, colors…)
`height`	`280`	Grafik yüksekliği (piksel); yer tutucu da bu yükseklikte açılır
`options.chart.toolbar.show`	`false`	ApexCharts araç çubuğu; true ile gösterilir
`options.chart.fontFamily`	`inherit`	Sayfanın yazı tipini kullanır