Использование Larapex Chart в вашем приложении Laravel

Содержание

Что такое Larapex Chart?
Как ее использовать?
Пример графика

Что такое Larapex Chart?

Larapex Chart — это библиотека для добавления красивых диаграмм для blade. Она представляет собой обертку библиотеки Apex chart для Laravel. Larapex chart позволяет вам генерировать графики с помощью php.

Как ее использовать?

Для использования добавьте Larapex chart с composer в ваш проект

composer require arielmejiadev/larapex-charts

Войдите в полноэкранный режим Выйдите из полноэкранного режима

Затем опубликуйте файл конфигурации с помощью этой команды

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

Войти в полноэкранный режим Выйти из полноэкранного режима

на этом установка закончена! И вы можете начать использовать 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 AppCharts;

use ArielMejiaDevLarapexChartsLarapexChart;

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