COMPONENT / CHARTS
3D Chart.
Pilih 3D bar, 3D scatter, 3D line atau 3D surface.
Preview
Activity in three dimensions
Small, understandable components. Native PHP, ready for the browser.
The chart loads when visible. Its data is available below.
| X | Y | Z |
|---|---|---|
| 0 | 0 | 5 |
| 1 | 0 | 12 |
| 2 | 0 | 19 |
| 3 | 0 | 9 |
| 4 | 0 | 16 |
| 0 | 1 | 6 |
| 1 | 1 | 13 |
| 2 | 1 | 20 |
| 3 | 1 | 10 |
| 4 | 1 | 17 |
| 0 | 2 | 7 |
| 1 | 2 | 14 |
| 2 | 2 | 21 |
| 3 | 2 | 11 |
| 4 | 2 | 18 |
| 0 | 3 | 8 |
| 1 | 3 | 15 |
| 2 | 3 | 5 |
| 3 | 3 | 12 |
| 4 | 3 | 19 |
| 0 | 4 | 9 |
| 1 | 4 | 16 |
| 2 | 4 | 6 |
| 3 | 4 | 13 |
| 4 | 4 | 20 |
PHP view
<?= component('chart-3d', ['title' => 'Activity in three dimensions', 'text' => 'Small, understandable components. Native PHP, ready for the browser.', 'recipe' => '3D bar']) ?>Usage
Pilih 3D bar, 3D scatter, 3D line atau 3D surface. Drag untuk rotasi dan scroll untuk zoom; browser harus mendukung WebGL.
- 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.
PHP view
<?= component('chart-3d', ['title' => 'Activity in three dimensions', 'text' => 'Small, understandable components. Native PHP, ready for the browser.', 'recipe' => '3D bar']) ?>Examples
Scatter
3D scatter
Drag to rotate. Scroll to zoom. Requires WebGL.
The chart loads when visible. Its data is available below.
| X | Y | Z |
|---|---|---|
| 0 | 0 | 5 |
| 1 | 0 | 12 |
| 2 | 0 | 19 |
| 3 | 0 | 9 |
| 4 | 0 | 16 |
| 0 | 1 | 6 |
| 1 | 1 | 13 |
| 2 | 1 | 20 |
| 3 | 1 | 10 |
| 4 | 1 | 17 |
| 0 | 2 | 7 |
| 1 | 2 | 14 |
| 2 | 2 | 21 |
| 3 | 2 | 11 |
| 4 | 2 | 18 |
| 0 | 3 | 8 |
| 1 | 3 | 15 |
| 2 | 3 | 5 |
| 3 | 3 | 12 |
| 4 | 3 | 19 |
| 0 | 4 | 9 |
| 1 | 4 | 16 |
| 2 | 4 | 6 |
| 3 | 4 | 13 |
| 4 | 4 | 20 |
PHP view
<?= component('chart-3d', ['title' => '3D scatter', 'recipe' => '3D scatter']) ?>Surface
3D surface
Drag to rotate. Scroll to zoom. Requires WebGL.
The chart loads when visible. Its data is available below.
| X | Y | Z |
|---|---|---|
| -4 | -4 | 0 |
| -4 | -3.5 | 0 |
| -4 | -3 | 0 |
| -4 | -2.5 | 0 |
| -4 | -2 | 0 |
| -4 | -1.5 | 0 |
| -4 | -1 | 0 |
| -4 | -0.5 | 0 |
| -4 | 0 | 0 |
| -4 | 0.5 | 0 |
| -4 | 1 | 0 |
| -4 | 1.5 | 0 |
| -4 | 2 | 0 |
| -4 | 2.5 | 0 |
| -4 | 3 | 0 |
| -4 | 3.5 | 0 |
| -4 | 4 | 0 |
| -3.5 | -4 | 0.982 |
| -3.5 | -3.5 | 0.928 |
| -3.5 | -3 | 0.771 |
| -3.5 | -2.5 | 0.53 |
| -3.5 | -2 | 0.231 |
| -3.5 | -1.5 | -0.094 |
| -3.5 | -1 | -0.408 |
| -3.5 | -0.5 | -0.678 |
| -3.5 | 0 | -0.873 |
| -3.5 | 0.5 | -0.972 |
| -3.5 | 1 | -0.964 |
| -3.5 | 1.5 | -0.849 |
| -3.5 | 2 | -0.642 |
| -3.5 | 2.5 | -0.363 |
| -3.5 | 3 | -0.045 |
| -3.5 | 3.5 | 0.278 |
| -3.5 | 4 | 0.571 |
| -3 | -4 | 1.855 |
| -3 | -3.5 | 1.753 |
| -3 | -3 | 1.458 |
| -3 | -2.5 | 1.002 |
| -3 | -2 | 0.436 |
| -3 | -1.5 | -0.178 |
| -3 | -1 | -0.772 |
| -3 | -0.5 | -1.281 |
| -3 | 0 | -1.65 |
| -3 | 0.5 | -1.837 |
| -3 | 1 | -1.821 |
| -3 | 1.5 | -1.605 |
| -3 | 2 | -1.213 |
| -3 | 2.5 | -0.686 |
| -3 | 3 | -0.085 |
| -3 | 3.5 | 0.526 |
| -3 | 4 | 1.079 |
| -2.5 | -4 | 2.524 |
| -2.5 | -3.5 | 2.385 |
| -2.5 | -3 | 1.984 |
| -2.5 | -2.5 | 1.364 |
| -2.5 | -2 | 0.594 |
| -2.5 | -1.5 | -0.242 |
| -2.5 | -1 | -1.051 |
| -2.5 | -0.5 | -1.744 |
| -2.5 | 0 | -2.245 |
| -2.5 | 0.5 | -2.499 |
| -2.5 | 1 | -2.478 |
| -2.5 | 1.5 | -2.184 |
| -2.5 | 2 | -1.65 |
| -2.5 | 2.5 | -0.934 |
| -2.5 | 3 | -0.115 |
| -2.5 | 3.5 | 0.716 |
| -2.5 | 4 | 1.469 |
| -2 | -4 | 2.916 |
| -2 | -3.5 | 2.755 |
| -2 | -3 | 2.292 |
| -2 | -2.5 | 1.575 |
| -2 | -2 | 0.686 |
| -2 | -1.5 | -0.279 |
| -2 | -1 | -1.213 |
| -2 | -0.5 | -2.014 |
| -2 | 0 | -2.593 |
| -2 | 0.5 | -2.887 |
| -2 | 1 | -2.862 |
| -2 | 1.5 | -2.523 |
| -2 | 2 | -1.906 |
| -2 | 2.5 | -1.079 |
| -2 | 3 | -0.133 |
| -2 | 3.5 | 0.827 |
| -2 | 4 | 1.696 |
| -1.5 | -4 | 2.986 |
| -1.5 | -3.5 | 2.822 |
| -1.5 | -3 | 2.347 |
| -1.5 | -2.5 | 1.613 |
| -1.5 | -2 | 0.702 |
| -1.5 | -1.5 | -0.286 |
| -1.5 | -1 | -1.243 |
| -1.5 | -0.5 | -2.063 |
| -1.5 | 0 | -2.656 |
| -1.5 | 0.5 | -2.956 |
| -1.5 | 1 | -2.931 |
| -1.5 | 1.5 | -2.584 |
| -1.5 | 2 | -1.952 |
| -1.5 | 2.5 | -1.105 |
| -1.5 | 3 | -0.136 |
| -1.5 | 3.5 | 0.847 |
| -1.5 | 4 | 1.737 |
| -1 | -4 | 2.728 |
| -1 | -3.5 | 2.578 |
| -1 | -3 | 2.144 |
| -1 | -2.5 | 1.474 |
| -1 | -2 | 0.642 |
| -1 | -1.5 | -0.261 |
| -1 | -1 | -1.135 |
| -1 | -0.5 | -1.884 |
| -1 | 0 | -2.426 |
| -1 | 0.5 | -2.701 |
| -1 | 1 | -2.678 |
| -1 | 1.5 | -2.36 |
| -1 | 2 | -1.783 |
| -1 | 2.5 | -1.009 |
| -1 | 3 | -0.125 |
| -1 | 3.5 | 0.774 |
| -1 | 4 | 1.587 |
| -0.5 | -4 | 2.169 |
| -0.5 | -3.5 | 2.05 |
| -0.5 | -3 | 1.705 |
| -0.5 | -2.5 | 1.172 |
| -0.5 | -2 | 0.51 |
| -0.5 | -1.5 | -0.208 |
| -0.5 | -1 | -0.903 |
| -0.5 | -0.5 | -1.498 |
| -0.5 | 0 | -1.929 |
| -0.5 | 0.5 | -2.148 |
| -0.5 | 1 | -2.13 |
| -0.5 | 1.5 | -1.877 |
| -0.5 | 2 | -1.418 |
| -0.5 | 2.5 | -0.803 |
| -0.5 | 3 | -0.099 |
| -0.5 | 3.5 | 0.615 |
| -0.5 | 4 | 1.262 |
| 0 | -4 | 1.372 |
| 0 | -3.5 | 1.296 |
| 0 | -3 | 1.078 |
| 0 | -2.5 | 0.741 |
| 0 | -2 | 0.323 |
| 0 | -1.5 | -0.131 |
| 0 | -1 | -0.571 |
| 0 | -0.5 | -0.948 |
| 0 | 0 | -1.22 |
| 0 | 0.5 | -1.358 |
| 0 | 1 | -1.347 |
| 0 | 1.5 | -1.187 |
| 0 | 2 | -0.897 |
| 0 | 2.5 | -0.508 |
| 0 | 3 | -0.063 |
| 0 | 3.5 | 0.389 |
| 0 | 4 | 0.798 |
| 0.5 | -4 | 0.423 |
| 0.5 | -3.5 | 0.4 |
| 0.5 | -3 | 0.333 |
| 0.5 | -2.5 | 0.229 |
| 0.5 | -2 | 0.1 |
| 0.5 | -1.5 | -0.041 |
| 0.5 | -1 | -0.176 |
| 0.5 | -0.5 | -0.292 |
| 0.5 | 0 | -0.377 |
| 0.5 | 0.5 | -0.419 |
| 0.5 | 1 | -0.416 |
| 0.5 | 1.5 | -0.366 |
| 0.5 | 2 | -0.277 |
| 0.5 | 2.5 | -0.157 |
| 0.5 | 3 | -0.019 |
| 0.5 | 3.5 | 0.12 |
| 0.5 | 4 | 0.246 |
| 1 | -4 | -0.572 |
| 1 | -3.5 | -0.54 |
| 1 | -3 | -0.449 |
| 1 | -2.5 | -0.309 |
| 1 | -2 | -0.134 |
| 1 | -1.5 | 0.055 |
| 1 | -1 | 0.238 |
| 1 | -0.5 | 0.395 |
| 1 | 0 | 0.508 |
| 1 | 0.5 | 0.566 |
| 1 | 1 | 0.561 |
| 1 | 1.5 | 0.495 |
| 1 | 2 | 0.374 |
| 1 | 2.5 | 0.212 |
| 1 | 3 | 0.026 |
| 1 | 3.5 | -0.162 |
| 1 | 4 | -0.333 |
| 1.5 | -4 | -1.504 |
| 1.5 | -3.5 | -1.421 |
| 1.5 | -3 | -1.182 |
| 1.5 | -2.5 | -0.813 |
| 1.5 | -2 | -0.354 |
| 1.5 | -1.5 | 0.144 |
| 1.5 | -1 | 0.626 |
| 1.5 | -0.5 | 1.039 |
| 1.5 | 0 | 1.337 |
| 1.5 | 0.5 | 1.489 |
| 1.5 | 1 | 1.476 |
| 1.5 | 1.5 | 1.301 |
| 1.5 | 2 | 0.983 |
| 1.5 | 2.5 | 0.556 |
| 1.5 | 3 | 0.069 |
| 1.5 | 3.5 | -0.427 |
| 1.5 | 4 | -0.875 |
| 2 | -4 | -2.27 |
| 2 | -3.5 | -2.145 |
| 2 | -3 | -1.784 |
| 2 | -2.5 | -1.227 |
| 2 | -2 | -0.534 |
| 2 | -1.5 | 0.217 |
| 2 | -1 | 0.945 |
| 2 | -0.5 | 1.568 |
| 2 | 0 | 2.019 |
| 2 | 0.5 | 2.248 |
| 2 | 1 | 2.229 |
| 2 | 1.5 | 1.965 |
| 2 | 2 | 1.484 |
| 2 | 2.5 | 0.84 |
| 2 | 3 | 0.104 |
| 2 | 3.5 | -0.644 |
| 2 | 4 | -1.321 |
| 2.5 | -4 | -2.787 |
| 2.5 | -3.5 | -2.634 |
| 2.5 | -3 | -2.19 |
| 2.5 | -2.5 | -1.506 |
| 2.5 | -2 | -0.656 |
| 2.5 | -1.5 | 0.267 |
| 2.5 | -1 | 1.16 |
| 2.5 | -0.5 | 1.925 |
| 2.5 | 0 | 2.479 |
| 2.5 | 0.5 | 2.759 |
| 2.5 | 1 | 2.736 |
| 2.5 | 1.5 | 2.412 |
| 2.5 | 2 | 1.822 |
| 2.5 | 2.5 | 1.031 |
| 2.5 | 3 | 0.127 |
| 2.5 | 3.5 | -0.791 |
| 2.5 | 4 | -1.622 |
| 3 | -4 | -2.997 |
| 3 | -3.5 | -2.832 |
| 3 | -3 | -2.355 |
| 3 | -2.5 | -1.619 |
| 3 | -2 | -0.705 |
| 3 | -1.5 | 0.287 |
| 3 | -1 | 1.247 |
| 3 | -0.5 | 2.07 |
| 3 | 0 | 2.665 |
| 3 | 0.5 | 2.967 |
| 3 | 1 | 2.942 |
| 3 | 1.5 | 2.593 |
| 3 | 2 | 1.959 |
| 3 | 2.5 | 1.109 |
| 3 | 3 | 0.137 |
| 3 | 3.5 | -0.85 |
| 3 | 4 | -1.744 |
| 3.5 | -4 | -2.877 |
| 3.5 | -3.5 | -2.718 |
| 3.5 | -3 | -2.261 |
| 3.5 | -2.5 | -1.554 |
| 3.5 | -2 | -0.677 |
| 3.5 | -1.5 | 0.275 |
| 3.5 | -1 | 1.197 |
| 3.5 | -0.5 | 1.987 |
| 3.5 | 0 | 2.558 |
| 3.5 | 0.5 | 2.848 |
| 3.5 | 1 | 2.824 |
| 3.5 | 1.5 | 2.489 |
| 3.5 | 2 | 1.88 |
| 3.5 | 2.5 | 1.065 |
| 3.5 | 3 | 0.131 |
| 3.5 | 3.5 | -0.816 |
| 3.5 | 4 | -1.674 |
| 4 | -4 | -2.44 |
| 4 | -3.5 | -2.306 |
| 4 | -3 | -1.918 |
| 4 | -2.5 | -1.318 |
| 4 | -2 | -0.574 |
| 4 | -1.5 | 0.234 |
| 4 | -1 | 1.015 |
| 4 | -0.5 | 1.685 |
| 4 | 0 | 2.17 |
| 4 | 0.5 | 2.416 |
| 4 | 1 | 2.395 |
| 4 | 1.5 | 2.111 |
| 4 | 2 | 1.595 |
| 4 | 2.5 | 0.903 |
| 4 | 3 | 0.112 |
| 4 | 3.5 | -0.692 |
| 4 | 4 | -1.42 |
PHP view
<?= component('chart-3d', ['title' => '3D surface', 'recipe' => '3D surface']) ?>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 selalu tersedia. Bundle GL lokal sudah disesuaikan untuk CSP; jangan menambahkan unsafe-eval.
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/chart-3d.php. Edit template ini jika membutuhkan perilaku tambahan. API PHP DL berbeda dari API React sumber rujukan.
Terminal
php dl component chart-3d