Ce tutoriel montre la création d'ApexCharts dynamiques dans une application Laravel 11 à l'aide du package larapex-charts.
ApexCharts, une bibliothèque de graphiques JavaScript, simplifie la création de graphiques visuellement attrayants et interactifs pour les sites Web. Sa polyvalence permet différents types de graphiques (à barres, courbes, secteurs, etc.), des options de personnalisation, des animations et une exploration interactive des données. Sa facilité d'utilisation et son rendu attractif contribuent à sa popularité.
Cet exemple génère des exemples de données utilisateur et affiche un diagramme circulaire représentant chaque mois de l'année en cours. Intégrons ce graphique dans votre projet Laravel 11.
Création de graphiques Apex dynamiques avec des graphiques Larapex dans Laravel 11
Étape 1 : Configuration de Laravel 11 (Facultatif)
Cette étape n'est nécessaire que si vous n'avez pas encore créé d'application Laravel 11. Utilisez la commande suivante :
<code class="language-bash">composer create-project laravel/laravel example-app</code>
Étape 2 : Installation du package larapex-charts
Installez le package arielmejiadev/larapex-charts
via Composer :
<code class="language-bash">composer require arielmejiadev/larapex-charts</code>
Publiez le fichier de configuration :
<code class="language-bash">php artisan vendor:publish --tag=larapex-charts-config</code>
Étape 3 : Définir l'itinéraire
Créez un itinéraire pour gérer la génération des graphiques. Ajoutez ceci à votre routes/web.php
fichier :
<code class="language-php"><?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\ApexchartsController; Route::get('charts', [ApexchartsController::class, 'index']);</code>
Étape 4 : Création de la classe Chart
Créez un répertoire Charts
dans votre répertoire app
. A l'intérieur, créez MonthlyUsersChart.php
avec le code suivant :
<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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!