侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

Laravel框架中使用Larapex Chart图表

Laravel  /  管理员 发布于 1星期前   156

什么是 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条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • Laravel 9.24版本发布(0个评论)
    • Laravel collect集合中获取二维数组中键值功能示例代码(0个评论)
    • lumen中验证类的实现及使用流程步骤(0个评论)
    • 构建你自己的Laravel扩展包的流程步骤(0个评论)
    • Laravel 9.23版本发布(0个评论)
    • 近期文章
    • GnuPG(GPG)生成用于替代SSH密钥的子密钥:签名、加密、鉴权及SSH验证(0个评论)
    • GnuPG(GPG)密钥创建的流程步骤(0个评论)
    • Laravel 9.24版本发布(0个评论)
    • windows系统phpstudy环境中安装amqp拓展流程步骤(0个评论)
    • windows10+docker desktop使用docker compose编排多容器构建dnmp环境(0个评论)
    • windows10+docker desktop运行laravel项目报错:could not find driver...(0个评论)
    • windows10+docker desktop报错:docker: Error response from daemon: user declined directory sharing(0个评论)
    • go语言中Pat多路复用器路由功能示例代码(0个评论)
    • go语言中HttpRouter多路复用器路由功能示例代码(0个评论)
    • js中使用Push.js通知库将通知推送到浏览器(0个评论)
    • 近期评论
    • nkt 在

      阿里云香港服务器搭建自用vpn:Shadowsocks使用流程步骤中评论 用了三分钟就被禁了,直接阿里云服务器22端口都禁了..
    • 熊丽 在

      安装docker + locust + boomer压测环境实现对接口的压测中评论 试试水..
    • 博主 在

      阿里云香港服务器搭建自用vpn:Shadowsocks使用流程步骤中评论 @test  也可能是国内大环境所至,也是好事,督促你该研究学习新技术..
    • test 在

      阿里云香港服务器搭建自用vpn:Shadowsocks使用流程步骤中评论 打了一次网页,然后再也打不开了。。是阿里云的缘故吗?..
    • 博主 在

      centos7中Meili Search搜索引擎安装流程步骤中评论 @鹿   执行以下命令看看你的2.27版本是否存在strin..
    • 2016-10
    • 2016-11
    • 2017-07
    • 2017-08
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2020-07
    • 2020-08
    • 2020-09
    • 2020-10
    • 2020-11
    • 2021-01
    • 2021-02
    • 2021-03
    • 2021-04
    • 2021-05
    • 2021-06
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2021-12
    • 2022-01
    • 2022-02
    • 2022-03
    • 2022-04
    • 2022-05
    • 2022-06
    • 2022-07
    • 2022-08
    Top

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

    侯体宗的博客