Interactive Chart.
Pilih salah satu dari 35 recipe.
Preview
Weekly activity
Small, understandable components. Native PHP, ready for the browser.
The chart loads when visible. Its data is available below.
| Day | Value |
|---|---|
| Mon | 24 |
| Tue | 38 |
| Wed | 31 |
| Thu | 58 |
| Fri | 46 |
| Sat | 70 |
| Sun | 62 |
<?= component('interactive-chart', ['title' => 'Weekly activity', 'text' => 'Small, understandable components. Native PHP, ready for the browser.', 'recipe' => 'Bar']) ?>Usage
Pilih salah satu dari 35 recipe. Bundle ECharts lokal dimuat ketika chart mendekati viewport. Untuk custom options wajib sertakan columns dan rows yang merepresentasikan data yang sama.
- Gunakan layout DL yang sudah memuat CSS dan dl.js.
- Letakkan kode berikut di view PHP Anda.
- Ganti data contoh dengan nilai aplikasi. Teks di-escape otomatis.
<?= component('interactive-chart', ['title' => 'Weekly activity', 'text' => 'Small, understandable components. Native PHP, ready for the browser.', 'recipe' => 'Bar']) ?>Examples
Line chart
Weekly trend
Interactive chart with accessible data below.
The chart loads when visible. Its data is available below.
| Day | Value |
|---|---|
| Mon | 24 |
| Tue | 38 |
| Wed | 31 |
| Thu | 58 |
| Fri | 46 |
| Sat | 70 |
| Sun | 62 |
<?= component('interactive-chart', ['title' => 'Weekly trend', 'recipe' => 'Line']) ?>Doughnut chart
Distribution
Interactive chart with accessible data below.
The chart loads when visible. Its data is available below.
| Day | Value |
|---|---|
| Mon | 24 |
| Tue | 38 |
| Wed | 31 |
| Thu | 58 |
| Fri | 46 |
| Sat | 70 |
| Sun | 62 |
<?= component('interactive-chart', ['title' => 'Distribution', 'recipe' => 'Doughnut']) ?>API reference
Props PHP yang didukung implementasi DL. Field di dalam array mengikuti bentuk pada kolom Type. Props yang tidak dicantumkan tidak menjadi bagian API komponen.
| Prop | Type / values | Panduan |
|---|---|---|
title | string | Judul konten yang ditampilkan. |
text | string | Isi teks biasa; HTML di-escape. |
recipe | string | Nama recipe persis sesuai panduan Charts; peka huruf besar/kecil. |
options | array|null | Opsi ECharts dari kode tepercaya; wajib disertai rows dan columns. Callback JavaScript tidak dapat dikirim sebagai JSON. |
rows | array<array<string|number>> | Daftar baris; setiap baris berisi nilai sel sesuai columns. |
columns | string[] | Daftar label header sesuai urutan kolom. |
Behavior & accessibility
Tabel data dirender PHP dan tetap tersedia jika JavaScript gagal. Gunakan chart-3d untuk recipe berawalan 3D.
Uji keyboard, fokus, dan pembaca layar pada halaman aplikasi Anda. Contoh ini tidak menggantikan audit aksesibilitas aplikasi secara menyeluruh.
Source & agent context
Source tersedia di views/components/interactive-chart.php. Edit template ini jika membutuhkan perilaku tambahan. API PHP DL berbeda dari API React sumber rujukan.
php dl component interactive-chart