Cara Membuat Carta Apex Dinamik Menggunakan Pakej Carta Larapex dalam Laravel 11

Tutorial ini menunjukkan membina ApexCharts dinamik dalam aplikasi Laravel 11 menggunakan pakej carta larapex.

ApexCharts, perpustakaan carta JavaScript, memudahkan penciptaan carta yang menarik secara visual dan interaktif untuk tapak web. Fleksibilitinya membolehkan pelbagai jenis carta (bar, garisan, pai, dll.), pilihan penyesuaian, animasi dan penerokaan data interaktif. Kemudahan penggunaan dan output yang menarik menyumbang kepada popularitinya.

Contoh ini menjana sampel data pengguna dan memaparkan carta pai yang mewakili setiap bulan dalam tahun semasa. Mari integrasikan carta ini ke dalam projek Laravel 11 anda.

Mencipta Carta Puncak Dinamik dengan Carta Larapex dalam Laravel 11

Langkah 1: Menyediakan Laravel 11 (Pilihan)

Langkah ini hanya perlu jika anda belum mencipta aplikasi Laravel 11. Gunakan arahan berikut:

<code class="language-bash">composer create-project laravel/laravel example-app</code>

Langkah 2: Memasang Pakej carta larapex

Pasang pakej arielmejiadev/larapex-charts melalui Komposer:

<code class="language-bash">composer require arielmejiadev/larapex-charts</code>

Terbitkan fail konfigurasi:

<code class="language-bash">php artisan vendor:publish --tag=larapex-charts-config</code>

Langkah 3: Menentukan Laluan

Buat laluan untuk mengendalikan penjanaan carta. Tambahkan ini pada fail routes/web.php anda:

<code class="language-php"><?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ApexchartsController;

Route::get('charts', [ApexchartsController::class, 'index']);</code>

Langkah 4: Mencipta Kelas Carta

Buat direktori Charts dalam direktori app anda. Di dalam, buat MonthlyUsersChart.php dengan kod berikut:

<code class="language-php">
<?php

namespace App\Charts;

use ArielMejiaDev\LarapexCharts\LarapexChart;
use App\Models\User;
use DB;

class MonthlyUsersChart
{
    protected $chart;

    public function __construct(LarapexChart $chart)
    {
        $this->chart = $chart;
    }

    public function build()
    {
        $users = User::select(DB::raw("COUNT(*) as count"), DB::raw("MONTHNAME(created_at) as month_name"))
                    ->whereYear('created_at', date('Y'))
                    ->groupBy(DB::raw("Month(created_at)"))
                    ->pluck('count', 'month_name');

        return $this->chart->pieChart()
            ->set</code>

Atas ialah kandungan terperinci Cara Membuat Carta Apex Dinamik Menggunakan Pakej Carta Larapex dalam Laravel 11. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!