laravel [ 拓展包: Charts ] laravel图表扩展包

一. 拓展介绍
在项目开发中,创建图表是很常用的功能,但是对于一些前端能力不足的小伙伴来说可能觉得望尘莫及,为了解决这一问题,Erik Campobadal创建了一个新的Laravel图表包来创建交互式图表。它支持十多个最流行的图表库,从标准线图和条形图到实时图表库。都可以让我们在项目中随意使用,轻松切换。不过可能用起来有一些庞大,没有直接用echart这样的框架效果好,不过足够使用
二. 安装
首先在命令终端里定位到项目的根目录,通过运行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中包含一个设置数组,你可以在里面找到扩展包的默认设置。注意: 有网友反馈说无法使用,原因是;composer 自动加载的3.0的版本 换成2.0的就好
三. 用法示例
控制器代码示例:
<?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]);
}
}

  1. 视图代码示例:
    <!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 - - - -
    google 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 - - - - - - -
    highcharts x x x - - - - - - -
    google 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文件。

HTTPROOT | 自学PHP | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 石头哥 |微信小程序 |木讯
Copyright © 1998 - 2016 HTTPROOT.COM. All Rights Reserved httproot.com 版权所有