Создание web-приложения для расчета точки безубыточности с помощью JavaScript
Здравствуйте! В сегодняшней статье мы рассмотрим создание простого web-приложения на JavaScript для расчета точки безубыточности с использованием библиотеки Chart.js. Это приложение будет принимать данные от пользователя (постоянные издержки, переменные издержки на единицу продукции и цену за единицу продукции) и автоматически рассчитывать точку безубыточности. Кроме того, оно визуализирует этот расчет в виде графика.
Как работает приложение?
Наше приложение состоит из одной HTML-страницы, которая включает форму для ввода данных и область для отображения графика. Сама логика расчета реализована на JavaScript, и для построения графика используется Chart.js. Основные шаги работы приложения:
- Пользователь вводит данные: постоянные издержки, переменные издержки на единицу и цену за единицу продукции.
- Приложение проверяет корректность данных: цена за единицу должна быть больше переменных издержек.
- После проверки приложение рассчитывает точку безубыточности по формуле:
- Рассчитанное значение выводится на экран, и на основе введенных данных строится график, где отображаются издержки и выручка. График показывает, при каком объеме производства выручка начинает превышать издержки (точка безубыточности).
Точка безубыточности = Постоянные издержки/(Цена за единицу - Переменные издержки на единиц)
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", который поможет вам стать настоящим экспертом.
-
Создано 23.10.2024 09:46:39
-
Михаил Русаков
Комментарии (2):
а можно как-то для визуализации хотя бы скрины того, что должно получиться на веб-странице ???.. или как раньше ссылку на jsfiddle ... ибо понять о чем речь просто глядя на строки кода не очень получается
Ответить
Да, конечно. Вот ссылка на пример сайта https://resplendent-semolina-ae28e2.netlify.app/. И ссылка на результат https://prnt.sc/Ri1l8Y1tHYxY.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.