Charts.

Pilih komponen

chart menampilkan container dan tabel data. interactive-chart menggambar chart 2D, sedangkan chart-3d memuat renderer WebGL. Keduanya tetap menyertakan tabel yang dirender PHP.

Recipe siap pakai

Nama recipe peka huruf besar/kecil. Contoh berikut langsung merender grafik Line.

<?= component('interactive-chart', ['title'=>'Weekly trend', 'recipe'=>'Line', 'text'=>'Contoh data mingguan.']) ?>

Data aplikasi sendiri

Berikan options ECharts dan tabel rows/columns yang cocok. Hanya konfigurasi dari kode tepercaya; jangan menerima options mentah dari pengguna.

<?= component('interactive-chart', [
    'title'=>'Orders',
    'options'=>[
        'xAxis'=>['type'=>'category', 'data'=>['Mon','Tue']],
        'yAxis'=>['type'=>'value'],
        'series'=>[['name'=>'Orders', 'type'=>'bar', 'data'=>[12,19]]],
    ],
    'columns'=>['Day','Orders'], 'rows'=>[['Mon',12],['Tue',19]],
]) ?>

Grafik 3D

Empat recipe: 3D bar, 3D scatter, 3D line dan 3D surface. Browser perlu WebGL. Drag untuk rotasi dan scroll untuk zoom.

<?= component('chart-3d', ['title'=>'3D activity', 'recipe'=>'3D bar']) ?>

Loading, animasi dan CSP

Vendor lokal dimuat hanya saat chart mendekati viewport. Checkbox mengatur legend dan tooltip; reduced-motion mematikan animasi opsi chart. Patch GL memakai fungsi tetap untuk ekspresi bawaan sehingga tidak perlu unsafe-eval. Callback JavaScript tidak didukung melalui props JSON.

Daftar recipe

Pilih recipe ini untuk memulai, lalu ganti dengan data aplikasi sendiri.

• Bar
• Horizontal bar
• Grouped bar
• Stacked bar
• Waterfall
• Line
• Smooth line
• Step line
• Area
• Stacked area
• Mixed
• Scatter
• Bubble
• Pie
• Doughnut
• Rose
• Radar
• Polar bar
• Heatmap
• Calendar
• Treemap
• Sunburst
• Tree
• Sankey
• Funnel
• Gauge
• Boxplot
• Candlestick
• Graph
• Parallel
• Theme river
• 3D bar
• 3D scatter
• 3D line
• 3D surface