Chart.js在Laravel项目中的应用示例

介绍

Chart.js是一个HTML5图表库，使用canvas元素来展示各式各样的客户端图表，支持折线图、柱形图、雷达图、饼图、环形图等， 本文将介绍如何在laravel项目中使用chart.js

安装

可以通过以下命令在 npm 或 bower 中来安装chart.js。

npm install chart.js –save
bower install chart.js –save

可以在你的项目中使用 CDN link。

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

可以从GitHub里面下载最新版本的 Chart.js 从github下载的话，里面也有很多例子可以学习。

我这边选择的是下载了几个js文件，然后放置于Laravel项目的public/js目录下面，如下图：

使用

在html中任何你希望的位置加入以下代码, 这个canvas就是图表的位置。：