Laravel框架中使用Larapex Chart图表

Laravel  /  管理员 发布于 1年前   377

什么是 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/

  • 上一条：
    安装docker + locust + boomer压测环境实现对接口的压测
    下一条：
    laravel 8框架实现订单表按月份水平分表流程步骤

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客