Application of Chart.js in Laravel project

This article is reproduced, the original: Chart.js in the Laravel project application

Introduced

Chart.js is a HTML5 chart library that uses canvas elements to showcase a wide range of client diagrams, support line charts, column charts, radar charts, pie charts, doughnut charts, and more, and this article describes how to use Chart.js in Laravel projects.

Installation

You can install chart.js in NPM or bower with the following command.

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, and there are plenty of examples to learn.

My choice is to download a few JS files, and then placed in the Laravel project under the Public/js directory, such as:

Use

Add the following code wherever you want in the HTML, and this canvas is where the chart is. ：

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

Then in the controller to implement a data query method, and to return a JSON string, the specific data according to your needs, I only check a set of data, make a pie chart, can also be more than one group of data production line chart, histogram and so on.

 Public functionGetchartdata () {$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; }

To add a route:

Route::get (' Get_chart_data ', ' member\[email protected] ');

JS implementation:

$.get (' Get_chart_data ',function(data, status) {varCTX = document.getElementById ("My_chart"). GetContext ("2d")); varMy_chart =NewChart (ctx,{type:' Pie ', Data: {labels: ["Home article List",                        "Categorized articles list",                        "Article details",                        "About me.",], datasets: [{data:data, back                            Groundcolor: [Window.chartColors.red, Window.chartColors.orange,                        Window.chartColors.purple, Window.chartColors.green, ],}]}, options: {responsive:true,                }            });});

Definition of color:

Window.chartcolors = {    ' rgb (255,) ',    ' RGB (255, 159, +) ',    ' rgb (255, 205 , (+)'    ,' RGB (192, 192)    ', ' RGB (162, 235) '    , ' RGB (153, 102, 255) '  ,    ' RGB (201, 203, 207) '};

Results such as:

The value of the type in JS is changed to doughnut, and the result is as follows:

See the official documentation for more information: http://chartjs.cn/docs/#line-chart-introduction

Application of Chart.js in Laravel project