Laravel图表扩展包推荐:Charts
介绍
在项目开发中,创建图表通常是一件痛苦的事情。因为你必须将数据转换为图表库支持的格式传输到模板中,并且每个图表的插件库是不同的。如果需要替换图表插件的时候,我们就得重新处理数据结构。
为了解决这一问题,一位名叫Erik Campobadal
的开发人员创建了一个新的Laravel
图表包来创建交互式图表。它支持十多个最流行的图表库,从标准线图和条形图到实时图表库。都可以让我们在项目中随意使用,轻松切换。
注意:
laravel5.5
以上如下方法可能无法使用,最新的参考Laravel5.5以上使用Charts图表统计图
安装
首先在命令终端里定位到项目的根目录,通过运行composer
命令进行下载安装:
composer require consoletvs/charts
下载完成后,在目录config/app.php中添加该扩展包的服务提供者:
'providers' => [
ConsoleTVs\Charts\ChartsServiceProvider::class,
],
以及服务的别名:
'alias' => [
'Charts' => ConsoleTVs\Charts\Charts::class,
],
最后通过artisan发布该扩展包的资源,包括配置文件,模板标签等:
php artisan vendor:publish --tag=charts_config
php artisan vendor:publish --tag=charts_assets --force
命令执行后,在配置目录config/charts.php
中包含一个设置数组,你可以在里面找到扩展包的默认设置。
用法示例
控制器代码示例:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use Charts;
class TestController extends Controller
{
public function index()
{
$chart = Charts::create('line', 'highcharts')
->setView('custom.line.chart.view') // Use this if you want to use your own template
->setTitle('My nice chart')
->setLabels(['First', 'Second', 'Third'])
->setValues([5,10,20])
->setDimensions(1000,500)
->setResponsive(false);
return view('test', ['chart' => $chart]);
}
}
视图代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Charts</title>
{!! Charts::assets() !!}
</head>
<body>
<center>
{!! $chart->render() !!}
</center>
</body>
</html>
单数据图表
使用Charts::create()
方法创建图表,该方法接收两个参数。第一个参数是图表类型,第二个是使用的图表库。例如:
Charts::create('line', 'highcharts')
->setTitle('My nice chart')
->setLabels(['First', 'Second', 'Third'])
->setValues([5,10,20])
->setDimensions(1000,500)
->setResponsive(false);
附各图表插件库对单数据图表的支持情况:
单图表 | 线形图 | 区域图 | 柱状图 | 饼状图 | 环状图 | 地理图 | 测量图 | 温度表 | 百分比 | 进度条 |
---|---|---|---|---|---|---|---|---|---|---|
chartjs | x | x | x | x | x | - | - | - | - | - |
highcharts | x | x | x | x | x | x | - | - | - | - |
x | x | x | x | x | x | x | - | - | - | |
material | x | - | x | - | - | - | - | - | - | - |
chartist | x | x | x | x | x | - | - | - | - | - |
fusioncharts | x | x | x | x | x | - | - | - | - | - |
morris | x | x | x | - | x | - | - | - | - | - |
plottablejs | x | x | x | x | x | - | - | - | - | - |
minimalist | x | x | x | x | x | - | - | - | - | - |
canvas-gauges | - | - | - | - | - | - | x | x | - | - |
justgage | - | - | - | - | - | - | x | - | x | - |
progressbarjs | - | - | - | - | - | - | - | - | x | x |
多数据图表
要创建多数据集图表使用Charts::multi()
方法,参数和单数据图表相同。在增加数据时,需要使用setDataset()
方法添加数据。例如:
Charts::multi('line', 'highcharts')
->setColors(['#ff0000', '#00ff00', '#0000ff'])
->setLabels(['One', 'Two', 'Three'])
->setDataset('Test 1', [1,2,3])
->setDataset('Test 2', [0,6,0])
->setDataset('Test 3', [3,4,1]);
setDataset()
方法接收两个参数。第一个为字符串,代表元素标签;第二个参数为数组,代表数值:
Charts::multi('bar', 'minimalist')
->setResponsive(false)
->setDimensions(0, 500)
->setColors(['#ff0000', '#00ff00', '#0000ff'])
->setLabels(['One', 'Two', 'Three'])
->setDataset('Test 1', [1,2,3])
->setDataset('Test 2', [0,6,0])
->setDataset('Test 3', [3,4,1]);
附各图表插件库对多数据图表的支持情况:
多图表 | 线形图 | 区域图 | 柱状图 | 饼状图 | 环状图 | 地理图 | 测量图 | 温度表 | 百分比 | 进度条 |
---|---|---|---|---|---|---|---|---|---|---|
chartjs | x | x | x | - | - | - | - | - | - | - |
highcharts | x | x | x | - | - | - | - | - | - | - |
x | x | x | - | - | - | - | - | - | - | |
material | x | - | x | - | - | - | - | - | - | - |
chartist | x | x | x | - | - | - | - | - | - | - |
fusioncharts | x | x | x | - | - | - | - | - | - | - |
morris | x | x | x | - | - | - | - | - | - | - |
plottablejs | x | x | x | - | - | - | - | - | - | - |
minimalist | x | x | x | - | - | - | - | - | - | - |
canvas-gauges | - | - | - | - | - | - | - | - | - | - |
justgage | - | - | - | - | - | - | - | - | - | - |
progressbarjs | - | - | - | - | - | - | - | - | - | - |
图表示例
饼状图,highcharts不一定能更改此图表的颜色:
Charts::create('pie', 'highcharts')
->setTitle('My nice chart')
->setLabels(['First', 'Second', 'Third'])
->setValues([5,10,20])
->setDimensions(1000,500)
->setResponsive(false);
环状图,highcharts和chartist不一定能更改此图表的颜色:
Charts::create('donut', 'highcharts')
->setTitle('My nice chart')
->setLabels(['First', 'Second', 'Third'])
->setValues([5,10,20])
->setDimensions(1000,500)
->setResponsive(false);
线形图:
Charts::create('line', 'highcharts')
->setTitle('My nice chart')
->setElementLabel('My nice label')
->setLabels(['First', 'Second', 'Third'])
->setValues([5,10,20])
->setDimensions(1000,500)
->setResponsive(false);
区域图:
Charts::create('area', 'highcharts')
->setTitle('My nice chart')
->setElementLabel('My nice label')
->setLabels(['First', 'Second', 'Third'])
->setValues([5,10,20])
->setDimensions(1000,500)
->setResponsive(false);
柱状图,highcharts不一定能更改此图表的颜色:
Charts::create('bar', 'highcharts')
->setTitle('My nice chart')
->setElementLabel('My nice label')
->setLabels(['First', 'Second', 'Third'])
->setValues([5,10,20])
->setDimensions(1000,500)
->setResponsive(false);
地理位置,标签必须具有国家/地区代码,而不是名称。如果要向图表添加颜色,需要提供至少2种颜色的数组。 第一个是最小值,第二个是最大值:
Charts::create('geo', 'highcharts')
->setTitle('My nice chart')
->setElementLabel('My nice label')
->setLabels(['ES', 'FR', 'RU'])
->setColors(['#C5CAE9', '#283593'])
->setValues([5,10,20])
->setDimensions(1000,500)
->setResponsive(false);
扩展图表库
你可以在存储库中通过创建分支创建自己的图表。src/Templates
文件夹包含所有当前图表,但你可以添加如下:
- 创建一个新文件,语法是:
library.type.php
- 如果你的图表库被调用,mylib和模板属于线形图的扩展,你应该创建一个这样的文件:
mylib.line.php
- 调用使用:
$chart = Charts::create('line','mylib');
你需要将CSS/JS
添加到/ src
文件夹中的includes.php
文件。
想获取更多有关Charts扩展包的内容,请访问github地址:https://github.com/ConsoleTVs/Charts
用户评论
-
Song 2017-07-16 04:00:58这个插件能生成数据后直接保存图片不在前台显示吗?0 赞 0 条评论 回复评论查看更多评论!这个图标扩展包能生成图片保存吗?0 赞 0 条评论 回复评论查看更多评论!前台要后台选择的那个图形库,前台要引入相应的js: ``` {!! $chart1->container() !!} {!! $chart->script() !!} ```0 赞 0 条评论 回复评论查看更多评论!后台示例: ``` $chart = new SampleChart; $chart->labels(['One', 'Two', 'Three', 'Four']); $chart->dataset('My dataset', 'line', [1, 2, 3, 4]); $chart->dataset('My dataset 2', 'line', [4, 3, 2, 1]); ```0 赞 0 条评论 回复评论查看更多评论!artisan命令执行之后会在`app/charts`目录下创建一个名为上面名为name的图表类,支持多种表类型,详情见(https://charts.erik.cat/create_charts.html#create-a-chart-class),成功之后直接在控制器里面引用即可0 赞 0 条评论 回复评论查看更多评论!由于版本升级,方法有一点更新,前面一点就是到发布版本之后,要先创建一个图表类: ``` php artisan make:chart {Name} {Library?}//name为表名字,library为表类型 ```0 赞 0 条评论 回复评论查看更多评论!如果想要控制图表样式,可以前往`resources/views/vendor/charts`修改样式:如前往`resources/views/vendor/charts/highcharts/line.blade.php`移除掉下面的代码即可实现自适应: ``` @include('charts::_partials.dimension.js2') ```
更多相关好文
当前暂无更多相关好文推荐...-
laravel中distinct()的使用方法与去重 2017-09-11
-
Laravel将view缓存为静态html,laravel页面静态缓存 2021-10-09
-
[ laravel爬虫实战--基础篇 ] guzzle描述与安装 2017-11-01
-
[ 配置教程 ] 在ubuntu16.04中部署LNMP环境(php7+maridb且开启maridb远程以及nginx多域名访问 )并配置laravel环境 2017-07-18
-
Laravel模型更新全表如何实现? 2024-03-11
热门文章
-
Laravel模型更新全表如何实现? 2024-03-11
-
php图片转为二进制数据的方法 2023-10-23
-
Jquery如何监听动态创建元素的点击事件? 2023-09-08
-
所以SheetJS实现table导出数据为Excel 2023-09-05
-
ubuntu crontab设置定时任务教程以及常见命令合集 2023-08-21
栏目最新文章
本站主要用于学习交流Laravel技术,分享Laravel优秀案例;同时非常欢迎大家投稿哦!如果有招聘信息也可以联系我我帮忙发布哦!公告提示
提交评论