如何在 Laravel 11 中使用 Larapex Charts 套件建立動態 Apexcharts

本教學示範使用 larapex-charts 套件在 Laravel 11 應用程式中建立動態 ApexCharts。

ApexCharts 是一個 JavaScript 圖表庫，可簡化為網站建立具有視覺吸引力和互動式圖表的過程。 其多功能性允許使用各種圖表類型（條形圖、折線圖、圓餅圖等）、自訂選項、動畫和互動式資料探索。 它的易用性和有吸引力的輸出使其廣受歡迎。

此範例產生範例使用者資料並顯示代表當年每個月的圓餅圖。讓我們將此圖表整合到您的 Laravel 11 專案中。

在 Laravel 11 中使用 Larapex 圖表建立動態 Apexchart

第 1 步：設定 Laravel 11（可選）

僅當您尚未建立 Laravel 11 應用程式時才需要執行此步驟。 使用以下指令：

composer create-project laravel/laravel example-app

第 2 步：安裝 larapex-charts 軟體包

透過 Composer 安裝 arielmejiadev/larapex-charts 套件：

composer require arielmejiadev/larapex-charts

發布設定檔：

php artisan vendor:publish --tag=larapex-charts-config

第 3 步：定義路線

建立一條路線來處理圖表產生。 將其新增至您的 routes/web.php 檔案：

<?php

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

Route::get('charts', [ApexchartsController::class, 'index']);

第 4 步：建立圖表類別

在您的 Charts 目錄中建立一個 app 目錄。在裡面，使用以下程式碼建立 MonthlyUsersChart.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

以上是如何在 Laravel 11 中使用 Larapex Charts 套件建立動態 Apexcharts的詳細內容。更多資訊請關注PHP中文網其他相關文章！