Laravel图表扩展包推荐：Charts

2016年11月15日 · 2283次 · 4条 · laravel,package,charts

介绍

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

为了解决这一问题，一位名叫Erik
Campobadal的开发人员创建了一个新的Laravel图表包来创建交互式图表。它支持十多个最流行的图表库，从标准线图和条形图到实时图表库。都可以让我们在项目中随意使用，轻松切换。

安装

首先在命令终端里定位到项目的根目录，通过运行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);

环状图，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