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

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

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

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

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

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

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

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

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>

Вывод