Laravel 11のLarapex Chartsパッケージを使用して動的なApexchartを作成する方法

このチュートリアルでは、larapex-charts パッケージを使用して、Laravel 11 アプリケーション内で動的な ApexChart を構築する方法を示します。

ApexCharts は JavaScript グラフ作成ライブラリであり、Web サイト向けに視覚的に魅力的でインタラクティブなグラフの作成を簡素化します。 その多用途性により、さまざまなグラフの種類 (棒、折れ線、円など)、カスタマイズ オプション、アニメーション、対話型のデータ探索が可能になります。 その使いやすさと魅力的な出力が人気に貢献しています。

この例では、サンプル ユーザー データを生成し、今年の各月を表す円グラフを表示します。このチャートを 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: Chart クラスの作成

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パッケージを使用して動的なApexchartを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。