Maison >développement back-end >tutoriel php >Comment créer des graphiques Apex dynamiques à l'aide du package de graphiques Larapex dans Laravel 11

Comment créer des graphiques Apex dynamiques à l'aide du package de graphiques Larapex dans Laravel 11

Patricia Arquette
Patricia Arquetteoriginal
2025-01-20 14:14:14196parcourir

How To Create Dynamic Apexcharts Using Larapex Charts Package in Laravel 11

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn