Я хочу построить простую гистограмму с диаграммой js в ядре aspnet MVC, но у меня возникают проблемы при передаче данных из SQL для оси y.
Это мой контроллер.
public ActionResult DashBoard()
{
var purchaseOrderID = _context.Podetails.Select(x =>
x.PodetailsId).Distinct();
ViewBag.PurchaseOrderID = purchaseOrderID;
var qtyOrdered = _context.Podetails.Select(x => x.QtyOrdered);
ViewBag.QtyOrdered = qtyOrdered;
return View();
}
Это мой взгляд
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<style>
#chart_container{
width:400px;
height:400px;
border: 1px solid #ddd;
padding:1px;
border-radius:4px;
}
</style>
</head>
<body>
<div id="chart_container">
<canvas id="bar_chart"></canvas>
</div>
<script>
var purchaseOrderID = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.PurchaseOrderID));
var qtyOrdered = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.QtyOrdered));
@*@{ var purchaseOrderID = ViewBag.PurchaseOrderID;}
@{ var qtyOrdered = ViewBag.QtyOrdered;}*@
var ctx = $('#bar_chart');
var barchart = new Chart(ctx, {
type: 'bar',
data: {
labels: purchaseOrderID,
dataset: [{
label: "Bar Chart example",
data:qtyOrdered,
backgroundColor: ["rgba(244,166,54,0.5)", "rgba(145,65,72,0.5)", "(74,25,92,0.5)"],
borderColor: ["rgba(244,166,54,0.5)", "rgba(145,65,72,0.5)", "(74,25,92)"],
borderwidth: 1
}]
},
options: {
maintainAspectRatio: false,
scales: {
xAxes: [{ ticks: { beginAtZero: true } }]
},
legend: { display: false }
},
});
</script>
</body>
</html>
Это моя таблица базы данных
Таблица PODetails
Мой вывод пока что.Как вы видите, я могу передать PurchaseOrderID по оси X (от 1 до 7).Но я не могу заполнить заказанное количество для каждого заказа на покупку на графике.
Вывод пока