CourseWork_BankYouBankrupt/BankYouBankrupt/BankYouBankruptClientApp/Views/Home/Diagram.cshtml

@using BankYouBankruptContracts.ViewModels.Client.Diagram

@model ClientDiagramViewModel

@{
	ViewData["Title"] = "Диаграмма";
}

<div class="text-center">
    <h1 class="display-4">Диаграмма по месяцам</h1>
</div>

<form method="post">
    <div class="row">
        <div class="row">Номер счета:</div>
        <div class="col">
            <select id="cardId" name="cardId" class="form-control" asp-items="@(new SelectList( @ViewBag.Cards, "Id", "Number"))"></select>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <input type="submit" value="Выбрать" class="btn btn-warning"/>
        </div>
    </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: 6,
                    backgroundColor: 'rgb(255, 165, 0)'
                }]
            },
        options: {
            plugins: {
                legend: {
                    display: false
                },
                customCanvasBackgroundColor: {
                    color: 'white',
                }
            },
            scales: {
                y: {
                    suggestedMin: Math.min(data) - Math.min(data) * -0.1,
                    suggestedMax: Math.max(data) + Math.max(data) * 0.1,
                }
            }
        }
    }
    );
   
</script>