@using BankYouBankruptContracts.ViewModels @model CashierDiagramViewModel @{ ViewData["Title"] = "Диаграмма"; } <div class="text-center"> <h1 class="display-4">Диаграмма суммарных поступлений на счёт по месяцам</h1> </div> <form method="post"> <div class="row mb-2"> <div class="row">Номер счета:</div> <select id="accountId" name="accountId" class="form-control" asp-items="@(new SelectList( @ViewBag.Accounts, "Id", "AccountNumber"))"> <option disabled selected>Выберите счёт</option> </select> </div> <div class="row mb-2"> <input style="width:100%;" type="submit" value="Выбрать" class="btn btn-dark" /> </div> </form> @if (Model == null) return; <div id="Diagrams" class="text-center"> <div id="@Model.DiagramName Diagram"> <canvas id="Chart"></canvas> <div id="params"> @foreach (var info in Model.Elements) { <input type="hidden" id="@info.Name" value="@info.Value" /> } </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> const diagrams = document.getElementById('Diagrams').childNodes; let diagram_name = diagrams[1].id; console.log(diagram_name); let diagram = document.getElementById(diagram_name).childNodes; console.log(diagram); let labels = []; let data = []; document.getElementById('params').childNodes.forEach(element => { if (element.id != undefined) { labels.push(element.id); } }); document.getElementById('params').childNodes.forEach(element => { if (element.id != undefined) { data.push(Number(element.value)); } }); new Chart(diagram.item(1), { type: 'bar', data: { labels: labels, datasets: [{ label: 'Денег в этом месяце', data: data, borderWidth: 1, backgroundColor: 'rgb(33, 37, 41)' }] }, options: { plugins: { legend: { display: false } }, scales: { y: { suggestedMin: Math.min(data) - Math.min(data) * -0.1, suggestedMax: Math.max(data) + Math.max(data) * 0.1, } } } } ); </script>