Explication détaillée sur l'utilisation de Chart.js dans le projet Laravel-tutoriel php-php.cn

Explication détaillée sur l'utilisation de Chart.js dans le projet Laravel

黄舟

Libérer： 2023-03-15 21:28:02

original

2588 Les gens l'ont consulté

Cet article présente principalement les exemples d'application de Chart.js dans les projets Laravel. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Venez jeter un œil avec l'éditeur

Introduction

Chart.js est une bibliothèque de graphiques HTML5 qui utilise l'élément canevas pour afficher une variété de graphiques clients. des graphiques, des histogrammes, des diagrammes radar, des diagrammes circulaires, des diagrammes en beignet, etc. Cet article expliquera comment utiliser chart.js

installation

dans les projets Laravel Installer le graphique .js dans npm ou bower via la commande suivante.

npm install chart.js --save
bower install chart.js --save

Copier après la connexion

Vous pouvez utiliser le lien CDN dans votre projet.

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js

Copier après la connexion

Vous pouvez télécharger la dernière version de Chart.js depuis GitHub Si vous la téléchargez depuis github, il existe de nombreux exemples dont vous pouvez tirer des leçons.

Ce que j'ai choisi ici, c'est de télécharger quelques fichiers js et de les placer dans le répertoire public/js du projet Laravel, comme indiqué ci-dessous :

Utilisez

pour ajouter le code suivant où vous le souhaitez dans le html. Ce canevas est la position du graphique. :

<canvas id="my_chart" width="300" height="300"></canvas>

Copier après la connexion

Ensuite, implémentez une méthode de requête de données dans le contrôleur et renvoyez une chaîne json. Les données spécifiques dépendent de vos besoins. Ici, je n'ai vérifié qu'un seul ensemble de données. et créé un diagramme circulaire. Vous pouvez également utiliser plusieurs ensembles de données pour créer des graphiques linéaires, des graphiques à barres, etc.

  public function GetChartData(){
    $my_data = array();
    array_push($today_data, VisitCapacity::where(&#39;my_data&#39;,&#39;>=&#39;, Carbon::today())->where(&#39;site&#39;,1)->count());
    array_push($today_data, VisitCapacity::where(&#39;my_data&#39;,&#39;>=&#39;, Carbon::today())->where(&#39;site&#39;,2)->count());
    array_push($today_data, VisitCapacity::where(&#39;my_data&#39;,&#39;>=&#39;, Carbon::today())->where(&#39;site&#39;,3)->count());
    array_push($today_data, VisitCapacity::where(&#39;my_data&#39;,&#39;>=&#39;, Carbon::today())->where(&#39;site&#39;,4)->count());
    Log::info(json_encode($my_data));
    return $my_data;
  }

Copier après la connexion

Ajouter un itinéraire :

 Route::get(&#39;get_chart_data&#39;, &#39;Member\UserController@GetChartData&#39;);

Copier après la connexion

implémentation js :

$.get(&#39;get_chart_data&#39;,function (data, status) {
var ctx = document.getElementById("my_chart").getContext("2d");
      var my_chart = new Chart(ctx,{
        type: &#39;pie&#39;,
        data: {
          labels: [
            "首页文章列表",
            "分类文章列表",
            "文章详情",
            "关于我",
          ],
          datasets: [{
            data: data,
            backgroundColor: [
              window.chartColors.red,
              window.chartColors.orange,
              window.chartColors.purple,
              window.chartColors.green,
            ],
          }]
        },
        options: {
          responsive: true,
        }
      });
});

Copier après la connexion

Définition de la couleur :

window.chartColors = {
  red: &#39;rgb(255, 99, 132)&#39;,
  orange: &#39;rgb(255, 159, 64)&#39;,
  yellow: &#39;rgb(255, 205, 86)&#39;,
  green: &#39;rgb(75, 192, 192)&#39;,
  blue: &#39;rgb(54, 162, 235)&#39;,
  purple: &#39;rgb(153, 102, 255)&#39;,
  grey: &#39;rgb(201, 203, 207)&#39;
};

Copier après la connexion

Le résultat est le suivant :