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
Libérer: 2025-01-20 14:14:14
original
193 Les gens l'ont consulté

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>
Copier après la connexion

É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>
Copier après la connexion

Publiez le fichier de configuration :

<code class="language-bash">php artisan vendor:publish --tag=larapex-charts-config</code>
Copier après la connexion

É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>
Copier après la connexion

É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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal