介绍

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

安装

可以通过以下命令在国家预防机制或凉亭中来安装chart.js。

国家预防机制安装chart.js - savebower安装chart.js -保存可以在你的项目中使用加拿大链接。

https://cdnjs。云耀斑。com/Ajax/libs/chart。js/2。6 .0/图表。捆绑。js https://cdnjs。云耀斑。com/Ajax/libs/chart。js/2。6 .0/图表。捆绑。量滴js https://cdnjs。云耀斑。com/Ajax/libs/chart。js/2。6 .0/图表。js 3359 cdnjs。云耀斑。com/Ajax/lib可以从开源代码库里面下载最新版本的图表。射流研究…从开源代码库下载的话，里面也有很多例子可以学习。

我这边选择的是下载了几个射流研究…文件，然后放置于Laravel项目的公共/js目录下面，如下图：

使用

在超文本标记语言中任何你希望的位置加入以下代码，这个帆布就是图表的位置。

画布id='my_chart '宽度='300 '高度=' 300 '/画布然后在控制器中实现一个数据查询的方法，且要返回一个json字符串，具体的数据根据你的需求而定，这边我只查了一组数据，制作一个饼图，也可以要多组数据制作折线图，柱状图等。

公共函数GetChartData(){ $ my _ data=array()；array_push($today_data，访问容量：3360其中(' my _ data '，'='，carbon : day())-其中(' site '，1)-count())；array_push($today_data，访问容量：3360其中(' my _ data '，'='，carbon : day())-其中(' site '，2)-count())；array_push($today_data，访问容量：3360其中(' my _ data '，'='，carbon : day())-其中(' site '，3)-count())；array_push($today_data，访问容量：3360其中(' my _ data '，'='，carbon : day())-其中(' site '，4)-count())；日志：信息(JSON _ encode($ my _ data))；返回$ my _ data}添加路由：

路由： get(' get _ chart _ data '，' Member [email protected]')；射流研究…实现：

$.get('get_chart_data '，函数（数据，状态){ var CTX=文档。getelementbyid(' my _ chart ').getContext(' 2d ')；var my_chart=新图表(ctx，{ type: 'pie '，data: { labels: ['首页文章列表', '分类文章列表', '文章详情', '关于我，]，数据集：[{ data : data，底色：[window . chart colors]。红色，窗口。图表颜色。橙色，窗口。图表颜色。紫色，window.chartColors.green，]，}] }，options 3360 { response ve : true，} })；});颜色的定义：

窗户。图表颜色={红色： 'rgb(255，99，132 ')，橙色： 'rgb(255，159，64 ')，黄色： ' RGB(255，205，86 ')，绿色： 'rgb(75，192，192 ')，蓝色： 'rgb(54，162，235 ')，紫色： '结果如下图：

将射流研究…中的类型的值馅饼改成甜甜圈，结果如下图：

更多的使用见官方文档：http://图表js。cn/docs/#折线图-简介

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。