Создание web-приложения для расчета точки безубыточности с помощью JavaScript

Создание web-приложения для расчета точки безубыточности с помощью JavaScript

Создание web-приложения для расчета точки безубыточности с помощью JavaScript

Здравствуйте! В сегодняшней статье мы рассмотрим создание простого web-приложения на JavaScript для расчета точки безубыточности с использованием библиотеки Chart.js. Это приложение будет принимать данные от пользователя (постоянные издержки, переменные издержки на единицу продукции и цену за единицу продукции) и автоматически рассчитывать точку безубыточности. Кроме того, оно визуализирует этот расчет в виде графика.

Как работает приложение?

Наше приложение состоит из одной HTML-страницы, которая включает форму для ввода данных и область для отображения графика. Сама логика расчета реализована на JavaScript, и для построения графика используется Chart.js. Основные шаги работы приложения:

  1. Пользователь вводит данные: постоянные издержки, переменные издержки на единицу и цену за единицу продукции.
  2. Приложение проверяет корректность данных: цена за единицу должна быть больше переменных издержек.
  3. После проверки приложение рассчитывает точку безубыточности по формуле:

  4. Точка безубыточности = Постоянные издержки/(Цена за единицу — Переменные издержки на единиц)

  5. Рассчитанное значение выводится на экран, и на основе введенных данных строится график, где отображаются издержки и выручка. График показывает, при каком объеме производства выручка начинает превышать издержки (точка безубыточности).

HTML-страница

Приложение представлено в одном файле HTML, который включает как структуру страницы, так и логику на JavaScript. Подключение Chart.js происходит через CDN, что делает проект легко настраиваемым.

Пример HTML-кода:

<!DOCTYPE html>

<html lang="ru">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Точка безубыточности</title>

    <!-- Подключаем библиотеку Chart.js -->

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>

        body {

            font-family: Arial, sans-serif;

        }

        h1, h2 {

            text-align: center;

        }

        form {

            text-align: center;

            margin-top: 20px;

        }

        canvas {

            display: block;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <h1>Рассчитать точку безубыточности</h1>

    <form id="breakEvenForm">

        <label for="fixedCosts">Постоянные издержки:</label>

        <input type="number" id="fixedCosts" required><br><br>



        <label for="variableCosts">Переменные издержки (на единицу):</label>

        <input type="number" id="variableCosts" required><br><br>



        <label for="pricePerUnit">Цена за единицу продукции:</label>

        <input type="number" id="pricePerUnit" required><br><br>



        <button type="submit">Рассчитать</button>

    </form>



    <h2 id="result"></h2>

    <canvas id="breakEvenChart" width="400" height="200"></canvas>



    <script>

    document.getElementById('breakEvenForm').addEventListener('submit', function(e) {

        e.preventDefault(); // Предотвращаем перезагрузку страницы



        // Получаем значения с формы

        const fixedCosts = parseFloat(document.getElementById('fixedCosts').value);

        const variableCosts = parseFloat(document.getElementById('variableCosts').value);

        const pricePerUnit = parseFloat(document.getElementById('pricePerUnit').value);



        // Проверка значений

        if (pricePerUnit <= variableCosts) {

            document.getElementById('result').innerText = "Ошибка: цена за единицу должна быть больше переменных издержек.";

            return;

        }



        // Рассчитываем точку безубыточности

        const breakEvenPoint = fixedCosts / (pricePerUnit - variableCosts);

        document.getElementById('result').innerText = `Точка безубыточности: ${breakEvenPoint.toFixed(2)} единиц продукции`;



        // Данные для построения графика

        const units = [];

        const totalCosts = [];

        const revenues = [];



        for (let i = 0; i <= Math.ceil(breakEvenPoint) * 2; i++) {

            units.push(i);

            totalCosts.push(fixedCosts + variableCosts * i);

            revenues.push(pricePerUnit * i);

        }



        // Удаляем предыдущий график, если он был

        const oldCanvas = document.getElementById('breakEvenChart');

        oldCanvas.remove();



        // Создаем новый canvas для графика

        const newCanvas = document.createElement('canvas');

        newCanvas.id = 'breakEvenChart';

        newCanvas.width = 400;

        newCanvas.height = 200;

        document.body.appendChild(newCanvas);



        // Получаем контекст нового canvas

        const ctx = newCanvas.getContext('2d');



        // Строим график

        new Chart(ctx, {

            type: 'line',

            data: {

                labels: units,

                datasets: [

                    {

                        label: 'Издержки',

                        data: totalCosts,

                        borderColor: 'red',

                        fill: false,

                        tension: 0.1

                    },

                    {

                        label: 'Выручка',

                        data: revenues,

                        borderColor: 'green',

                        fill: false,

                        tension: 0.1

                    }

                ]

            },

            options: {

                scales: {

                    x: {

                        title: {

                            display: true,

                            text: 'Количество единиц продукции'

                        }

                    },

                    y: {

                        title: {

                            display: true,

                            text: 'Сумма'

                        }

                    }

                }

            }

        });

    });

    </script>

</body>

</html>

Вывод

Таким образом, мы создали простое и наглядное web-приложение для расчета точки безубыточности с графиком. Оно позволяет легко вводить экономические показатели, рассчитывать ключевые значения и мгновенно видеть результаты на графике. Это приложение отлично подходит для быстрого анализа данных и демонстрации расчета безубыточности. Если вы хотите глубже погрузиться в программирование на JavaScript, рекомендую курс «Программирование на JavaScript с Нуля до Гуру 2.0″, который поможет вам стать настоящим экспертом.

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий