Laravel 애플리케이션에서 Larapex Chart 사용하기

6944 단어 chartlaravelphpbeginners

Larapex 차트는 무엇입니까?



Larapex 차트는 블레이드에 아름다운 차트를 추가하는 라이브러리입니다. Apex 차트 라이브러리의 laravel 래퍼입니다. Larapex 차트를 사용하면 PHP로 차트 작성을 생성할 수 있습니다.

사용 방법 ?



그것을 사용하려면 작곡가와 함께 Larapex 차트를 프로젝트에 추가하십시오.

composer require arielmejiadev/larapex-charts


그런 다음 이 명령을 사용하여 구성 파일을 게시합니다.

php artisan vendor:publish --tag=larapex-charts-config


이것으로 설정 완료! 그리고 Larapex 차트를 사용할 수 있습니다! 🙂

차트 예시



차트를 만들려면 다음 명령을 사용하십시오.

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()]);
}


완료하려면 뷰에 $chart->container() , $chart->cdn() 및 $chart->script() 메서드를 추가하여 차트를 렌더링합니다.

<!doctype html>
<html lang="en">
<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
방법: 브라우저 확장을 사용하여 웹사이트에 UI 삽입
"이"키워드는 무엇입니까? 자바스크립트에서

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage