README

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

安装

视频教程

要安装图表，请使用 composer

下载

composer require hilioski/charts

添加服务提供者和别名

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

ConsoleTVs\Charts\ChartsServiceProvider::class,

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

'Charts' => ConsoleTVs\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)

为 groupByDay() 和 lastByDay() 函数设置精美的日期格式，如果 $fancy 设置为 true，必须在那些函数之前调用。

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

为 groupByMonth() 和 lastByMonth() 函数设置精美的日期格式，如果 $fancy 设置为 true，必须在那些函数之前调用。

默认： 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(可选 string $year, 可选 boolean $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(可选 string $month, 可选 string $year, 可选 boolean $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, 可选 boolean $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);

lastByDay(可选 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);

颜色条

注意： colorbar 不包含元素标签图例。

Charts::create('colorbar', 'highcharts')
	->setTitle('My nice colorful chart')
  ->setColors(['#e04f67', '#7cb5ec'])
	->setLabels(['First', 'Second'])
	->setValues([5,10])
	->setDimensions(200,200)
	->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。

您有很多示例来查看如何放置数据，所以在制作您自己的之前，仔细查看所有包含的模板！

hilioski / charts

维护者

详细信息

README

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

目录

安装

视频教程

下载

添加服务提供者和别名

发布资产

默认设置

示例用法

创建图表

多数据集图表

数据库图表

实时图表

数学函数图表

图表函数

可用的图表设置

图表示例

饼图

环形图 / 环形饼图

折线图

面积图

柱状图

颜色条

地理图

仪表盘

温度

百分比

进度条

按照您的需求扩展！

创建一个新文件