本教學示範使用 larapex-charts 套件在 Laravel 11 應用程式中建立動態 ApexCharts。
ApexCharts 是一個 JavaScript 圖表庫，可簡化為網站建立具有視覺吸引力和互動式圖表的過程。 其多功能性允許使用各種圖表類型（條形圖、折線圖、圓餅圖等）、自訂選項、動畫和互動式資料探索。 它的易用性和有吸引力的輸出使其廣受歡迎。
此範例產生範例使用者資料並顯示代表當年每個月的圓餅圖。讓我們將此圖表整合到您的 Laravel 11 專案中。
在 Laravel 11 中使用 Larapex 圖表建立動態 Apexchart
第 1 步：設定 Laravel 11（可選）
僅當您尚未建立 Laravel 11 應用程式時才需要執行此步驟。 使用以下指令：
<code class="language-bash">composer create-project laravel/laravel example-app</code>
第 2 步：安裝 larapex-charts 軟體包
透過 Composer 安裝 arielmejiadev/larapex-charts 套件：
<code class="language-bash">composer require arielmejiadev/larapex-charts</code>
發布設定檔：
<code class="language-bash">php artisan vendor:publish --tag=larapex-charts-config</code>
第 3 步：定義路線
建立一條路線來處理圖表產生。 將其新增至您的 routes/web.php 檔案：
<code class="language-php"><?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ApexchartsController;
Route::get('charts', [ApexchartsController::class, 'index']);</code>第 4 步：建立圖表類別
在您的 Charts 目錄中建立一個 app 目錄。在裡面，使用以下程式碼建立 MonthlyUsersChart.php：
<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>以上是如何在 Laravel 11 中使用 Larapex Charts 套件建立動態 Apexcharts的詳細內容。更多資訊請關注PHP中文網其他相關文章！
