Как использовать гистограмму в PHP

Сегодня мы узнаем, как можно использовать гистограмму в php в нашем приложении или там, где вы хотите ее использовать. Когда мы используем диаграммы для каких-то коротких значений, таких как график продаж, график покупок, график прибыли, график активности и т.д., у нас есть много вариантов, например, множество библиотек. Тогда у нас есть много вариантов, как есть много библиотек, которые вы можете использовать для построения отзывчивых диаграмм, просто поместив библиотеку в ваш код. Сегодня я собираюсь сделать то же самое, давайте посмотрим, как мы это сделаем.

Я собираюсь использовать Chart.js, я обычно использую его, потому что он с открытым исходным кодом, а во-вторых, у него есть несколько вариантов графиков. Например,

  1. Линейная диаграмма
  2. столбиковая диаграмма
  3. диаграмма области

и многие другие. Но мы будем использовать гистограмму.

Создайте пустую страницу для использования гистограммы

Создавая эту пустую страницу, я также буду использовать boostrap css cdn для использования встроенных компонентов.

Когда вы создадите пустую страницу, мы создадим там график с новыми данными, и данные будут ручными, когда у вас будут динамические данные, вы сможете управлять ими соответствующим образом.

Что ж, давайте посмотрим, как мы можем это сделать и перейдем к основной части. Я создам пустую страницу. Затем я добавлю на эту страницу div с карточкой. Смотрите как :-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Charts Implementation</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
    <div class="container d-flex align-items-center justify-content-center " style="min-height: 600px;">
        <div class="row">
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        <div class="card-title">
                            This is card
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Вход в полноэкранный режим Выйти из полноэкранного режима

На выходе будет, I div в центре тела.

После создания этого div мы используем в нем некоторые графики и посмотрим, как мы можем их использовать. Мы также попробуем использовать некоторые динамические данные, а также некоторые ручные данные. И мы также можем изменять их на экране.

Мы рассмотрим все в этом уроке.

Теперь включите chart.js Cdn и начните реализовывать интерфейс графика.

Перед вами кнопка документации.

Начиная работу, вы можете получить ссылку на CDN, чтобы вставить ее в свой код, в противном случае вы можете скопировать ее отсюда, а если она не работает, то скопируйте ее оттуда.

Внедрение Chart.js CDN

 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Войдите в полноэкранный режим Выйти из полноэкранного режима

Затем я добавил некоторые данные через скрипт, и стало очень просто создать график с помощью пользовательских данных.

Создайте структуру данных

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Charts Implementation</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <script>
        const labels = ['march', 'april', 'may', 'jun', 'july', 'Aug', 'Sep'];
        const data = {
            labels: labels,
            datasets: [{
                label: 'My First Dataset',
                data: [65, 59, 80, 81, 56, 55, 40],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 205, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(201, 203, 207, 0.2)'
                ],
                borderColor: [
                    'rgb(255, 99, 132)',
                    'rgb(255, 159, 64)',
                    'rgb(255, 205, 86)',
                    'rgb(75, 192, 192)',
                    'rgb(54, 162, 235)',
                    'rgb(153, 102, 255)',
                    'rgb(201, 203, 207)'
                ],
                borderWidth: 1
            }]
        };
    </script>
    <div class="container d-flex align-items-center justify-content-center " style="min-height: 600px;">
        <div class="row">
            <div class="card" >
                <div class="card-content">
                    <div class="card-body">
                        <canvas id="chart2" style="min-height: 300px;" width="400" height="100">
                            <p>Hello Fallback World</p>
                        </canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const config = {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            },
        };
        const myChart = new Chart(
            document.getElementById('chart2'),
            config
        );
    </script>
</body>

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

После внедрения этого кода в ваш index.php вы увидите, что гистограмма выглядит потрясающе.

Заключение

Надеюсь, вы поняли, как можно легко использовать гистограмму в своем приложении. Хотя вы можете изменять и манипулировать массивом меток, а также из набора данных вы можете задавать нужные цвета столбцам.

Надеюсь, это поможет вам. Спасибо Larachamp

Сообщение Как использовать гистограмму в PHP появились сначала на Larachamp.

Оцените статью
devanswers.ru
Добавить комментарий