Chart. js application example in Laravel project, chart. jslaravel

Chart. js application example in Laravel project, chart. jslaravel

Introduction

Chart. js is an HTML5 chart library that uses the canvas Element to display a variety of client charts. It supports line charts, column charts, radar charts, pie charts, and ring charts, this article describes how to use chart in the laravel project. js

Install

Run the following command to install chart. js in npm or bower.

npm install chart.js --savebower install chart.js --save

You can use CDN link in your project.

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

You can download the latest version of Chart. js from GitHub. There are also many examples to learn.

I chose to download several js files and place them under the public/js directory of the Laravel Project, for example:

Use

Add the following code to any position in html. The canvas is the position of the chart. :

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

Then, implement a data query method in the controller and return a json string. The specific data depends on your needs. Here I only query a group of data, to create a pie chart, you can also create line charts and column charts for multiple groups of data.

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

Add route:

 Route::get('get_chart_data', 'Member\UserController@GetChartData');

Js implementation:

$. Get ('get _ chart_data ', function (data, status) {var ctx = document. getElementById ("my_chart "). getContext ("2d"); var my_chart = new Chart (ctx, {type: 'pie ', data: {labels: ["homepage article list", "Classification article list ", "Article details", "about me",], datasets: [{data: data, backgroundColor: [window. chartColors. red, window. chartColors. orange, window. chartColors. purple, window. chartColors. green,],}]}, options: {responsive: true ,}});});

Color definition:

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

The result is as follows:

Change the type value pie in js to doughnut. The result is as follows:

For more use, see the official documentation: http://chartjs.cn/docs/#line-chart-introduction

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.