79 lines
2.1 KiB
Plaintext
79 lines
2.1 KiB
Plaintext
@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-8">
|
|
<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-8"></div>
|
|
<div class="col-4">
|
|
<input type="submit" value="Выбрать" class="btn btn-primary"/>
|
|
</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: 1
|
|
}]
|
|
},
|
|
options: {
|
|
|
|
}
|
|
});
|
|
|
|
</script>
|