-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
311 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>BWL 10</title> | ||
| <link rel="stylesheet" href="css/style.css"> | ||
| <script src="js/menu.js"></script> | ||
| <script src="js/html2canvas.min.js"></script> | ||
| <script src="js/clipboard.min.js"></script> | ||
| <script src="js/chart.umd.min.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <main> | ||
| <a href="index.html">Zurück zur Übersicht</a> | ||
| <h1>Betriebswirtschaftslehre 10</h1> | ||
| <nav class="tab"> | ||
| <button class="tablinks" id="defaultOpen" | ||
| onclick="openCity(event, 'gewinnschwelle')">Gewinnschwelle</button> | ||
| </nav> | ||
| <section id="gewinnschwelle" class="tabcontent"> | ||
| <h2>Gewinnschwelle</h2> | ||
| <div class="box"> | ||
| <form> | ||
| <label for="fixkosten">Fixkosten:</label> | ||
| <input type="number" id="fixkosten" name="fixkosten" min="0" max="9999999" step="1000" | ||
| value="200000"><br> | ||
|
|
||
| <label for="variablestückkosten">Variable Stückkosten:</label> | ||
| <input type="number" id="variablestückkosten" name="variablestückkosten" min="0" max="50000" | ||
| step="1" value="5"><br> | ||
|
|
||
| <label for="nettoverkaufserlösestück">Nettoverkaufserlöse pro Stück:</label> | ||
| <input type="number" id="nettoverkaufserlösestück" name="nettoverkaufserlösestück" min="0" | ||
| max="50000" step="1" value="10" required><br><br> | ||
|
|
||
| <button type="button" value="Generate Chart" onclick="validateAndGenerateChart()">Diagramm | ||
| aktualisieren</button> | ||
|
|
||
| <button type="button" id="hideLEgend"><svg xmlns="http://www.w3.org/2000/svg" height="14" width="12" | ||
| fill="white" | ||
| viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--> | ||
| <path | ||
| d="M438.6 150.6c12.5-12.5 12.5-32.8 0-45.3l-96-96c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.7 96 32 96C14.3 96 0 110.3 0 128s14.3 32 32 32l306.7 0-41.4 41.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l96-96zm-333.3 352c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 416 416 416c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0 41.4-41.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3l96 96z" /> | ||
| </svg> Legende</button> | ||
| </form> | ||
| </div> | ||
| <div id="gewinnschwelleContainer" style="min-width:700px;padding:5px;"> | ||
| <canvas id="gewinnschwelleChart" width="700" height="500"></canvas> | ||
| </div> | ||
| <p style="text-align:center">Klicken Sie in die Legende, um einzelne Bestandteile auszublenden.</p> | ||
| <div class="exportButtons"> | ||
| <button class="icon" type="button" onclick="bestellmengeHerunterladenAlsPNG()"><svg | ||
| xmlns="http://www.w3.org/2000/svg" height="16" width="16" | ||
| viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--> | ||
| <path | ||
| d="M448 80c8.8 0 16 7.2 16 16V415.8l-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3V96c0-8.8 7.2-16 16-16H448zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z" /> | ||
| </svg></button> | ||
| </section> | ||
| <script> | ||
| // Get the element with id="defaultOpen" and click on it | ||
| document.getElementById("defaultOpen").click(); | ||
| </script> | ||
| </script> | ||
| <script src="js/bwl10.js"></script> | ||
| </main> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,191 @@ | ||
|
|
||
| document.getElementById('hideLEgend').addEventListener('click', function () { | ||
| gewinnschwelleChart.options.plugins.legend.display = !gewinnschwelleChart.options.plugins.legend.display; | ||
| gewinnschwelleChart.update(); | ||
| }); | ||
|
|
||
| function validateAndGenerateChart() { | ||
| const fixkostenInput = document.getElementById('fixkosten'); | ||
| const variablestückkostenInput = document.getElementById('variablestückkosten'); | ||
| const nettoverkaufserlösestückInput = document.getElementById('nettoverkaufserlösestück'); | ||
|
|
||
| const fixkosten = parseFloat(fixkostenInput.value); | ||
| const variablestückkosten = parseFloat(variablestückkostenInput.value); | ||
| const nettoverkaufserlösestück = parseFloat(nettoverkaufserlösestückInput.value); | ||
|
|
||
| if (isNaN(fixkosten) || isNaN(variablestückkosten) || isNaN(nettoverkaufserlösestück) || | ||
| fixkosten < 0 || fixkosten > 999999999 || | ||
| variablestückkosten < 0 || variablestückkosten > 100000 || | ||
| nettoverkaufserlösestück < 0 || nettoverkaufserlösestück > 50000) { | ||
| alert('Bitte geben Sie gültige positive Werte ein:\nFixkosten: 0 - 999999999\nVariable Stückkosten: 0 - 100000\nNettoverkaufserlöse pro Stück: 0 - 50000'); | ||
| return; | ||
| } | ||
|
|
||
| generateChart(); | ||
| } | ||
|
|
||
|
|
||
| function calculateData(fixkosten, variablestückkosten, nettoverkaufserlösestück, maxMenge) { | ||
|
|
||
| let gewinnschwelle; | ||
| let gewinnschwellenmenge; | ||
| gewinnschwelle = fixkosten / (nettoverkaufserlösestück - variablestückkosten); | ||
| gewinnschwellenmenge = gewinnschwelle * nettoverkaufserlösestück; | ||
|
|
||
|
|
||
| const variablekosten = variablestückkosten * maxMenge; | ||
| const gesamtkosten = fixkosten + variablekosten; | ||
| const nettoverkaufserlöse = nettoverkaufserlösestück * maxMenge; | ||
|
|
||
| return { | ||
| gewinnschwelle, | ||
| gewinnschwellenmenge, | ||
| variablekosten, | ||
| gesamtkosten, | ||
| nettoverkaufserlöse | ||
| }; | ||
| } | ||
|
|
||
| function generateChart() { | ||
| const plugin = { | ||
| id: 'customCanvasBackgroundColor', | ||
| options: { | ||
| color: 'white', // Set the default color | ||
| }, | ||
| beforeDraw: (myChart) => { | ||
| const { ctx } = myChart; | ||
| ctx.save(); | ||
| ctx.globalCompositeOperation = 'destination-over'; | ||
| ctx.fillStyle = plugin.options.color || '#ffffff'; | ||
| ctx.fillRect(0, 0, myChart.width, myChart.height); | ||
| ctx.restore(); | ||
| } | ||
| }; | ||
| const fixkosten = parseFloat(document.getElementById('fixkosten').value); | ||
| const variablestückkosten = parseFloat(document.getElementById('variablestückkosten').value); | ||
| const nettoverkaufserlösestück = parseFloat(document.getElementById('nettoverkaufserlösestück').value); | ||
|
|
||
| if (isNaN(fixkosten) || isNaN(variablestückkosten) || isNaN(nettoverkaufserlösestück)) { | ||
| alert('Please enter valid numeric values for all fields.'); | ||
|
|
||
| } | ||
| let maxMenge; | ||
| let gewinnschwelleNenner = nettoverkaufserlösestück - variablestückkosten; | ||
| if (gewinnschwelleNenner > 0) { | ||
| maxMenge = Math.ceil(fixkosten / (nettoverkaufserlösestück - variablestückkosten) * 2) || 1000 // Die maximale Menge wird dynamisch berechnet oder auf 1000 gesetzt, falls die Berechnung fehlschlägt | ||
| } else { | ||
| alert("Ungültige Werte: die Nettoverkaufserlöse müssen höher als die Variablen Stückkosten sein.") | ||
| return { | ||
| maxMenge: null, | ||
| } | ||
| } | ||
|
|
||
| const { | ||
| gewinnschwelle, | ||
| gewinnschwellenmenge, | ||
| variablekosten, | ||
| gesamtkosten, | ||
| nettoverkaufserlöse | ||
| } = calculateData(fixkosten, variablestückkosten, nettoverkaufserlösestück, maxMenge); | ||
|
|
||
| if (window.gewinnschwelleChart instanceof Chart) { | ||
| window.gewinnschwelleChart.destroy(); | ||
| } | ||
|
|
||
| const ctx = document.getElementById('gewinnschwelleChart').getContext('2d'); | ||
| window.gewinnschwelleChart = new Chart(ctx, { | ||
| type: 'scatter', | ||
| data: { | ||
| datasets: [ | ||
| { | ||
| label: 'Nettoverkaufserlöse', | ||
| data: [{ x: 0, y: 0 }, { x: maxMenge, y: nettoverkaufserlöse }], | ||
| backgroundColor: 'rgba(39, 245, 112, 0.8)', | ||
| borderColor: 'rgba(39, 245, 112, 0.8)', | ||
| borderWidth: 3, | ||
| showLine: true | ||
| }, | ||
| { | ||
| label: 'Gesamtkosten', | ||
| data: [{ x: 0, y: fixkosten }, { x: maxMenge, y: gesamtkosten }], | ||
| backgroundColor: 'rgba(0, 99, 132, 1)', | ||
| borderColor: 'rgba(0, 99, 132, 1)', | ||
| borderWidth: 3, | ||
| showLine: true | ||
| }, | ||
| { | ||
| label: 'Variablen Kosten', | ||
| data: [{ x: 0, y: 0 }, { x: maxMenge, y: variablekosten }], | ||
| backgroundColor: 'rgba(255, 99, 132, 1)', | ||
| borderColor: 'rgba(255, 99, 132, 1)', | ||
| borderWidth: 3, | ||
| showLine: true | ||
| }, | ||
| { | ||
| label: 'Fixkosten', | ||
| data: [{ x: 0, y: fixkosten }, { x: maxMenge, y: fixkosten }], | ||
| backgroundColor: 'rgba(245, 193, 39, 0.8)', | ||
| borderColor: 'rgba(245, 193, 39, 0.8)', | ||
| borderWidth: 3, | ||
| showLine: true | ||
| }, | ||
| { | ||
| type: 'scatter', | ||
| label: 'Gewinnschwelle', | ||
| data: [{ x: 0, y: gewinnschwellenmenge }, { x: gewinnschwelle, y: gewinnschwellenmenge }, { x: gewinnschwelle, y: 0 }], | ||
| borderColor: 'rgba(0, 0, 0, 1)', | ||
| borderWidth: 2, | ||
| pointRadius: 12, | ||
| showLine: true, | ||
| borderDash: [5, 5] | ||
| } | ||
| ] | ||
| }, | ||
| options: { | ||
| plugins: { | ||
| title: { display: true, text: 'Gewinnschwelle', font: { size: 20 } }, | ||
| legend: { position: 'bottom', labels: { font: { size: 16 } } }, | ||
| tooltip: { mode: 'index', intersect: false } | ||
| }, | ||
| hover: { mode: 'x-axis', intersect: false }, | ||
| scales: { | ||
| y: { | ||
| title: { | ||
| display: true, | ||
| text: 'Umsatz / Kosten' | ||
| }, | ||
| beginAtZero: true, | ||
| max: gewinnschwellenmenge * 1.5, | ||
| min: 0 | ||
| }, | ||
| x: { | ||
| max: maxMenge, | ||
| title: { | ||
| display: true, | ||
| text: 'Absatz (verkaufte Menge)' | ||
| }, | ||
| } | ||
| } | ||
| }, | ||
| plugins: [plugin], | ||
| }); | ||
| } | ||
|
|
||
| function bestellmengeHerunterladenAlsPNG() { | ||
| const wertetabelle = document.getElementById('gewinnschwelleContainer'); | ||
|
|
||
| html2canvas(wertetabelle).then(canvas => { | ||
| const dataURL = canvas.toDataURL('image/png'); | ||
| const a = document.createElement('a'); | ||
| a.href = dataURL; | ||
| a.download = 'gewinnschwelle.png'; | ||
| document.body.appendChild(a); | ||
| a.click(); | ||
| document.body.removeChild(a); | ||
| }); | ||
| } | ||
|
|
||
| document.addEventListener('DOMContentLoaded', function () { | ||
| // Hier wird generiereWertetabelle() beim Laden der Seite ausgeführt | ||
| generateChart(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters