搜索github2018 / charts
使用不同的图表库为 Laravel 创建图表
Requires
- consoletvs/charts: 5.*
This package is auto-updated.
Last update: 2024-09-29 05:08:34 UTC
README
删除 vendor/github2018
charts2018
Charts 是一个多库图表包，用于使用 Laravel 创建交互式图表。
目录
安装
视频教程
要安装图表，请使用 composer
下载
composer require github2018/charts
//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::multi('bar', 'material') // Setup the chart settings ->title("My Cool Chart") // A dimension of 0 means it will take 100% of the space ->dimensions(0, 400) // Width x Height // This defines a preset of colors already done:) ->template("material") // You could always set them manually // ->colors(['#2196F3', '#F44336', '#FFC107']) // Setup the diferent datasets (this is a multi chart) ->dataset('Element 1', [5,20,100]) ->dataset('Element 2', [15,30,80]) ->dataset('Element 3', [25,10,40]) // Setup what the values mean ->labels(['One', 'Two', 'Three']); return view('test', ['chart' => $chart]); } 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(必需 string $element_label, 必需 array $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(必需 mixed $data)
重新设置数据。
$chart = Charts::database(User::all(), 'bar', 'highcharts')->setData(Role::all());
-
setDateColumn(必需 string $column)
设置分组数据的列。
默认：
created_at$chart = Charts::database(User::all(), 'bar', 'highcharts')->setDateColumn('my_date_column');
-
setDateFormat(必需 string $format)
如果将
$fancy设置为 true，则设置用于groupByDay()和lastByDay()函数的精美日期格式，必须在调用这些函数之前调用。默认：
l dS M, Y$chart = Charts::database(User::all(), 'bar', 'highcharts')->setDateFormat('j F y');
-
setMonthFormat(必需 string $format)
如果将
$fancy设置为 true，则设置用于groupByMonth()和lastByMonth()函数的精美日期格式，必须在调用这些函数之前调用。默认：
F, Y$chart = Charts::database(User::all(), 'bar', 'highcharts')->setDateFormat('F Y');
-
groupBy(必需 string $column)
根据列分组数据。
$chart = Charts::database(User::all(), 'bar', 'highcharts') ->setElementLabel("Total") ->setDimensions(1000, 500) ->setResponsive(false) ->groupBy('game');
////////////////// $users = User::where(DB::raw("(DATE_FORMAT(created_at,'%Y'))"),date('Y'))
->get(); $chart = Charts::database($users, 'bar', 'highcharts') ->title("Monthly new Register Users") ->elementLabel("Total Users") ->dimensions(1000, 500) ->responsive(true) ->groupByMonth(date('Y'), true); ////////////////////////////////// -
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可用选项：
leftrightcenterCharts::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');
您需要将 CSS / JS 添加到位于 /src 文件夹中的 includes.php 文件。
您有很多示例可以查看如何放置数据，所以请在开始之前仔细查看所有包含的模板！