Laravel框架中使用Larapex Chart图表
什么是 Larapex Chart？
Larapex Chart是一个漂亮图表的库。它是Apex图表库的laravel包装器。Larapex 图表允许您使用 php 生成图表编写。
安装Larapex Chart
composer require arielmejiadev/larapex-charts
然后使用此命令发布配置文件
php artisan vendor:publish --tag=larapex-charts-config
至此，你就可以开始使用Larapex Chart了
创建Larapex Chart图表步骤
要创建图表，请使用以下命令：
php artisan make:chart MonthlyUsersChart然后选择图表类型：
- [x] Pie Chart
- [ ] Donut Chart
- [ ] Radial Bar Chart
- [ ] Polar Area Chart
- [ ] Line Chart
- [ ] Area Chart
- [ ] Bar Chart
- [ ] Horizontal Bar Chart
- [ ] HeatMap Chart
- [ ] Radar Chart现在您有了一个包含图表的新文件
app/Charts/MonthlyUsersChart.php
<?php
namespace App\Charts;
use ArielMejiaDev\LarapexCharts\LarapexChart;
class MonthlyUsersChart
{
protected $chart;
public function __construct(LarapexChart $chart)
{
$this->chart = $chart;
}
public function build()
{
return $this->chart->pieChart()
->setTitle('Top 3 scorers of the team.')
->setSubtitle('Season 2021.')
->addData([40, 50, 30])
->setLabels(['Player 7', 'Player 10', 'Player 9']);
}
}现在在您的控制器中注入图表对象：
public function index(MonthlyUsersChart $chart)
{
return view('users.index', ['chart' => $chart->build()]);
}并在视图中完成add $chart->container()和方法以呈现图表
$chart->cdn()
$chart->script()
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Chart Sample</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="h-screen bg-gray-100">
<div class="container px-4 mx-auto">
<div class="p-6 m-20 bg-white rounded shadow">
{!! $chart->container() !!}
</div>
</div>
<script src="{{ $chart->cdn() }}"></script>
{{ $chart->script() }}
</body>
</html>larapex-charts官方手册：
https://larapex-charts.netlify.app/
相关文章