Laravel图表扩展包推荐:Charts

Song • 1754 次浏览 • 29 个回复 • 2017年07月28日

介绍

在项目开发中,创建图表通常是一件痛苦的事情。因为你必须将数据转换为图表库支持的格式传输到模板中,并且每个图表的插件库是不同的。如果需要替换图表插件的时候,我们就得重新处理数据结构。

为了解决这一问题,一位名叫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 - - - -
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 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); 

laravel charts pie

环状图,highcharts和chartist不一定能更改此图表的颜色:

Charts::create('donut', 'highcharts')
  ->setTitle('My nice chart')
  ->setLabels(['First', 'Second', 'Third'])
  ->setValues([5,10,20])
  ->setDimensions(1000,500)
  ->setResponsive(false); 

laravel charts donut

线形图:

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); 

laravel charts line

区域图:

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); 

laravel charts area

柱状图,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); 

laravel charts bar

地理位置,标签必须具有国家/地区代码,而不是名称。如果要向图表添加颜色,需要提供至少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); 

laravel charts geo

扩展图表库

你可以在存储库中通过创建分支创建自己的图表。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


原创文章,转载请注明 :Laravel图表扩展包推荐:Charts - Laravel学习网
原文出处: https://phpartisan.cn/news/10.html
问题交流群 :168117787
提交评论
要回复文章请先登录注册
用户评论
  • huyuqing huyuqing 回复了小伙伴 2017-07-16 12:00:58 回复

    这个插件能生成数据后直接保存图片不在前台显示吗?

  • huyuqing huyuqing 2017-07-16 12:00:58 回复

    这个图标扩展包能生成图片保存吗?

  • 小伙伴 小伙伴 2017-07-16 12:00:58 回复

    前台要后台选择的那个图形库,前台要引入相应的js:

    {!! $chart1->container() !!}
    {!! $chart->script() !!}
  • 小伙伴 小伙伴 2017-07-16 12:00:58 回复

    后台示例:

    $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]);
  • 小伙伴 小伙伴 2017-07-16 12:00:58 回复

    artisan命令执行之后会在app/charts目录下创建一个名为上面名为name的图表类,支持多种表类型,详情见(https://charts.erik.cat/create_charts.html#create-a-chart-class),成功之后直接在控制器里面引用即可

  • 小伙伴 小伙伴 2017-07-16 12:00:58 回复

    由于版本升级,方法有一点更新,前面一点就是到发布版本之后,要先创建一个图表类:

    php artisan make:chart {Name} {Library?}//name为表名字,library为表类型
  • 小伙伴 小伙伴 2017-07-16 12:00:58 回复

    create database hero;

  • Song Song 2017-07-16 12:00:58 回复

    如果想要控制图表样式,可以前往resources/views/vendor/charts修改样式:如前往resources/views/vendor/charts/highcharts/line.blade.php移除掉下面的代码即可实现自适应:

    @include('charts::_partials.dimension.js2')
[ 配置教程 ] 在ubuntu16.04中部署LNMP环境(php7+maridb且开启maridb远程以及nginx多域名访问 )并配置laravel环境 Laravel 调试利器(Laravel Debugbar)扩展包安装及使用教程