README

Charts是一个多库图表包，用于使用laravel创建交互式图表。

安装

视频教程

要安装图表，请使用composer

下载

composer require husseinsayed/charts

添加服务提供程序和别名

将以下服务提供程序添加到config/app.php中的数组中：

HusseinSayed\Charts\ChartsServiceProvider::class,

将以下别名添加到config/app.php中的数组中：

'Charts' => HusseinSayed\Charts\Charts::class,

发布资产

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

创建图表

create方法的第一个参数是图表类型，第二个是库

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

多数据集图表

要创建多数据集图表，只需使用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(必需的字符串 $element_label, 必需的数组 $values)

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

数据库图表

您还可以通过简单的设置生成数据库图表！

$chart = Charts::database(User::all(), 'bar', 'highcharts');

示例数据：

注意：在渲染图表之前，您必须使用特定的分组方法！

重要：要与GroupByYear、GroupByMonth、GroupByDay、lastByYear、lastByMonth和lastByDay一起使用，您需要在数据行中使用列created_at。

可用方法如下

setData(必需的混合 $data)

重新设置数据。

 $chart = Charts::database(User::all(), 'bar', 'highcharts')->setData(Role::all());

setDateColumn(必需的字符串 $column)

设置用于分组数据的列。

默认： created_at

 $chart = Charts::database(User::all(), 'bar', 'highcharts')->setDateColumn('my_date_column');

setDateFormat(必需的字符串 $format)

如果将$fancy设置为true，则设置用于groupByDay()和lastByDay()函数的复杂日期格式，必须在调用这些函数之前调用。

默认： l dS M, Y
```
 $chart = Charts::database(User::all(), 'bar', 'highcharts')->setDateFormat('j F y');
```
setMonthFormat(必需的字符串 $format)

如果将$fancy设置为true，则设置用于groupByMonth()和lastByMonth()函数的复杂日期格式，必须在调用这些函数之前调用。

默认： F, Y
```
 $chart = Charts::database(User::all(), 'bar', 'highcharts')->setDateFormat('F Y');
```

groupBy(必需的字符串 $column)

根据列分组数据。

 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->groupBy('game');

groupByYear(可选 int $years)

基于年份分组数据。

默认： $years = 4

 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->groupByYear();

 // to display a number of years behind, pass a int parameter. For example to display the last 10 years:
 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->groupByYear(10);

groupByMonth(可选字符串 $year, 可选布尔值 $fancy)

按月份分组数据（如果没有设置年份，将使用当前年份）。

默认： $year = 7, $fancy = false

 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->groupByMonth();

 // to display a specific year, pass the parameter. For example to display the months of 2016 and display a fancy output label:
 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->groupByMonth('2016', true);

groupByDay(可选字符串 $month, 可选字符串 $year, 可选布尔值 $fancy)

按天分组数据（如果没有设置年/月，将使用当前年/月）。

默认： $month = date('m'), $year = date('Y'), $fancy = false

 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->groupByDay();

 // to display a specific month and/or year, pass the parameters. For example to display the days of september 2016 and display a fancy output label:
 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->groupByDay('09', '2016', true);

lastByYear(可选 int $number)

groupByYear方法的别名。做同样的事情。

默认： $number = 4

 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->lastByYear();

 // to display a number of years behind, pass a int parameter. For example to display the last 3 years:
 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->lastByYear(3);

lastByMonth(可选 int $number, 可选布尔值 $fancy)

显示相对于当前日期的月份数量。

默认： $number = 6, $fancy = false

 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->lastByMonth();

 // to display a number of months behind, pass a int parameter. For example to display the last 6 months and use a fancy output:
 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->lastByMonth(6, true);

按日计算（可选 int $number，可选 boolean $fancy）

显示相对于当前日期的日期差。

默认： $number = 7, $fancy = false

 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->lastByDay();

 // to display a number of days behind, pass a int parameter. For example to display the last 14 days and use a fancy output:
 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->lastByDay(14, true);

实时图表

可以创建实时图表。

示例 json

{"value":31}

'value' 可以通过 setValueName($string) 改为不同的索引名称

$chart = Charts::realtime(url('/path/to/json'), 2000, 'gauge', 'google')
            ->setValues([65, 0, 100])
            ->setLabels(['First', 'Second', 'Third'])
            ->setResponsive(false)
            ->setHeight(300)
            ->setWidth(0)
            ->setTitle("Permissions Chart")
			->setValueName('value'); //This determines the json index for the value

注意： 间隔设置为毫秒

可用方法如下

setValueName（必需 string $string）

设置值 json 索引。

默认： value

$chart = Charts::realtime(url('/path/to/json'), 2000, 'gauge', 'google')
			->setValues([65, 0, 100])
			->setLabels(['First', 'Second', 'Third'])
			->setResponsive(false)
			->setHeight(300)
			->setWidth(0)
			->setTitle("Permissions Chart")
			->setValueName('value'); //This determines the json index for the value

setUrl（必需 string $url）

在创建图表对象后设置 URL。

$chart = Charts::realtime(url('/path/to/json'), 2000, 'gauge', 'google')
			->setValues([65, 0, 100])
			->setLabels(['First', 'Second', 'Third'])
			->setResponsive(false)
			->setHeight(300)
			->setWidth(0)
			->setTitle("Permissions Chart")
			->setUrl(url('/new/json'));

setInterval（必需 int $interval）

在创建图表对象后设置间隔（毫秒）。

$chart = Charts::realtime(url('/path/to/json'), 2000, 'gauge', 'google')
			->setValues([65, 0, 100])
			->setLabels(['First', 'Second', 'Third'])
			->setResponsive(false)
			->setHeight(300)
			->setWidth(0)
			->setTitle("Permissions Chart")
			->setInterval(3000); // in ms

setMaxValues（必需 int $number）

设置在移除第一个值之前可见的最大值数量。

$chart = Charts::realtime(url('/path/to/json'), 1000, 'area', 'highcharts')
			->setResponsive(false)
			->setHeight(300)
			->setWidth(0)
			->setTitle("Permissions Chart")
			->setMaxValues(10);

数学函数图表

可以创建数学函数图表。

Charts::math('sin(x)', [0, 10], 0.2, 'line', 'highcharts');

函数是 sin(x)，间隔是 [0, 10]，而 x 幅度是 0.2

setFunction（必需 string $function）

设置函数。

Charts::math('sin(x)', [0, 10], 0.2, 'line', 'highcharts')->setFunction('x+1');

setInterval（必需 array $interval）

设置函数/图表间隔。

 Charts::math('sin(x)', [0, 10], 0.2, 'line', 'highcharts')->setInterval([2, 8]);

setAmplitude（必需 int $amplitude）

设置 x 点之间函数的幅度。

 Charts::math('sin(x)', [0, 10], 0.2, 'line', 'highcharts')->setAmplitude(0.5);

calculate()

计算图表的值/标签。

注意： 此函数在图表函数、间隔或幅度每次修改时都会被调用，因此您不需要每次更改值时都调用它。它只是一个辅助函数。
```
 Charts::math('sin(x)', [0, 10], 0.2, 'line', 'highcharts')->calculate();
```

图表函数

create（可选 string $type，可选 string $library）

返回一个新的图表实例，如果没有指定库，则使用默认库。
```
Charts::create('line');
Charts::create('line', 'highcharts');
```
database（必需 mixed $object，可选 string $type，可选 string $library）

返回一个扩展基本库的新数据库图表实例。
```
 Charts::database(User::all());
 Charts::create(User::all(), 'line', 'highcharts');
```
realtime（必需 string $url，必需 int $interval，可选 string $type，可选 string $library）

返回一个扩展基本库的新数据库图表实例。
```
 Charts::realtime(url('/json/data'), 2000, 'gauge', 'google')
```
realtime（必需 string $function，必需 array $interval，必需 int $amplitude，可选 string $type，可选 string $library）

返回一个扩展基本库的新数学函数图表实例。
```
 Charts::math('sin(x)', [0, 10], 0.2, 'line', 'highcharts');
```

assets（可选 array $libraries）

返回生成图形所需的所有资源。

要仅输出某些库，请向其中添加一个数组，包含您想要的库

 <?php echo Charts::assets(); ?>

 // Using blade
 {!! Charts::assets() !!}

 // Only certain libraries
 {!! Charts::assets(['google', 'chartjs']) !!}

libraries（可选 string $type）

返回所有可用的库数组（可以过滤）。

// Return all the libraries available
print_r(Charts::libraries());

// Return all the libraries available for the line chart
print_r(Charts::libraries('line'));

types（可选 string $library）

返回所有可用的图表类型数组（可以过滤）。

// Return all the chart types available
print_r(Charts::types());

// Return all the chart types available for the highcharts library
print_r(Charts::libraries('highcharts'));

可用的图表设置

setGaugeStyle（必需 string $style）

设置仪表风格

默认： left

可用选项： left right center
```
 Charts::create('gauge', 'google')->setGaugeStyle('right');
```
setType（必需 string $type）

在创建后设置图表类型（例如：从折线图到饼图）。
```
Charts::create('line', 'highcharts')->setType('pie');
```
setLibrary（必需 string $library）

在创建后设置图表库（例如：从 highcharts 到 google）。
```
Charts::create('line', 'highcharts')->setLibrary('google');
```

setLabels（必需 array $labels）

图表的标签。

Charts::create('line', 'highcharts')->setLabels(['First', 'Second', 'Third']);

setValues（必需 array $values）

图表的值。

Charts::create('line', 'highcharts')->setValues([10, 50, 100]);

setElementLabel（必需 string $element_label）

用于线图/柱状图/地理图表的元素标签。
```
Charts::create('line', 'highcharts')->setElementLabel('Total Views');
```

setTitle（必需 string $title）

图表标题。

Charts::create('line', 'highcharts')->setTitle('My Chart');

setColors（必需 array $colors）

图表的颜色。

Charts::create('line', 'highcharts')->setColors(['#ff0000', '#00ff00', '#0000ff']);

setWidth（必需 int $width）

如果非响应式，则图表宽度。0 = 响应式宽度。
```
Charts::create('line', 'highcharts')->setWidth(1000);
```
setHeight（必需 int $height）

如果非响应式，则图表高度。0 = 响应式高度。
```
Charts::create('line', 'highcharts')->setHeight(500);
```
setDimensions（必需 int $width，必需 int $height）

图表尺寸（设置宽度、高度的一个快捷方式）。
```
Charts::create('line', 'highcharts')->setHeight(1000, 500);
```
setResponsive（必需 boolean $responsive）

设置图表是否为响应式。如果不是，则使用图表尺寸。
```
Charts::create('line', 'highcharts')->setResponsive(false);
```

settings()

返回图表设置。

print_r(Charts::create('line', 'highcharts')->settings());

render()

渲染图表。

echo Charts::create('line', 'highcharts')->setLabels(['One', 'Two'])->setValues([10, 20])->render();

图表示例

饼图

注意：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：要为图表添加颜色，您需要提供一个包含至少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);

仪表盘

注意：您需要1个值或3个值，格式如下：[实际值，最小值，最大值]

Charts::create('gauge', 'canvas-gauges')
	->setTitle('My nice chart')
	->setElementLabel('My nice label')
	->setValues([65,0,100])
	->setResponsive(false)
	->setHeight(300)
	->setWidth(0);

温度

注意：您需要1个值或3个值，格式如下：[实际值，最小值，最大值]

Charts::create('temp', 'canvas-gauges')
	->setTitle('My nice chart')
	->setElementLabel('My nice label')
	->setValues([65,0,100])
	->setResponsive(false)
	->setHeight(300)
	->setWidth(0);

百分比

注意：您需要1个值或3个值，格式如下：[实际值，最小值，最大值]

Charts::create('percentage', 'justgage')
	->setTitle('My nice chart')
	->setElementLabel('My nice label')
	->setValues([65,0,100])
	->setResponsive(false)
	->setHeight(300)
	->setWidth(0);

进度条

注意：您需要1个值或3个值，格式如下：[实际值，最小值，最大值]

Charts::create('progressbar', 'progressbarjs')
	->setValues([65,0,100])
	->setResponsive(false)
	->setHeight(50)
	->setWidth(0);

发挥您的创意！

您可以通过分叉此存储库来创建自己的图表。src/Templates文件夹包含所有当前图表，但您可以像这样添加您的图表：

创建一个新文件

创建一个新文件，其语法为：library.type.php

如果您的图表库名为mylib，且您的模板是为折线图而设计的，即line，那么您将创建一个如下的文件：mylib.line.php

稍后调用它时，只需使用

$chart = Charts::create('line', 'mylib');

您需要在/src文件夹中找到的includes.php文件中添加CSS/JS。

您有很多示例可以查看如何放置数据，所以请在开始您的图表之前仔细查看所有包含的模板！

husseinsayed / charts

维护者

详细信息

README

Charts是一个多库图表包，用于使用laravel创建交互式图表。

目录

安装

视频教程

下载

添加服务提供程序和别名

发布资产

默认设置

示例用法

创建图表

多数据集图表

数据库图表

实时图表

数学函数图表

图表函数

可用的图表设置

图表示例

饼图

环形图 / 饼图

折线图

面积图

柱状图

地理图

仪表盘

温度

百分比

进度条

发挥您的创意！

创建一个新文件