Detailed explanation on the use of Chart.js in Laravel project-PHP Tutorial-php.cn

Detailed explanation on the use of Chart.js in Laravel project

黄舟

Release： 2023-03-15 21:28:02

Original

2587 people have browsed it

This article mainly introduces the application examples of Chart.js in Laravel projects. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

Introduction

Chart.js is an HTML5 chart library that uses the canvas element to display a variety of client charts. Supports line charts, column charts, radar charts, pie charts, donut charts, etc. This article will introduce how to use chart.js in laravel projects

Installation

You can Install chart.js in npm or bower via the following command.

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

Copy after login

You can use CDN link in your project.

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

Copy after login

You can download the latest version of Chart.js from GitHub. If you download it from github, there are many examples to learn from.

What I chose here is to download several js files and then place them under the public/js directory of the Laravel project, as shown below:

Use

to add the following code wherever you want in the html. This canvas is the location of the chart. ：

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

Copy after login

Then implement a data query method in the controller and return a json string. The specific data depends on your needs. Here I just After checking a set of data, make a pie chart. You can also use multiple sets of data to make line charts, bar charts, 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;
  }

Copy after login

Add routing:

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

Copy after login

js implementation:

$.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,
        }
      });
});

Copy after login

Definition of color:

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;
};

Copy after login

The result is as shown below:

Change the value of type in js Change pie to dough, and the result is as follows:

The above is the detailed content of Detailed explanation on the use of Chart.js in Laravel project. For more information, please follow other related articles on the PHP Chinese website!