Мой контроллер отображает мое представление в виде дерева json вместо реализованной мной круговой диаграммы.
Я попытался заполнить поле данных с помощью Viewbag, который выбрасывает ошибку Недопустимый номер из параметра консолибраузера.Я попытался передать данные с помощью Json из контроллера, который при минимальном отображении значений из базы данных.
Контроллер:
private readonly ApplicationDbContext db = new ApplicationDbContext();
[HttpGet]
public ActionResult GetData()
{
List<Fruit> fruitList = new List<Fruit>();
fruitList = db.Fruits.ToList<Fruit>();
ViewBag.FruitNames = (from x in db.Fruits
select x.FruitName).ToList();
return Json(new { data = fruitList },JsonRequestBehavior.AllowGet);
}
**View:**
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Charts</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js"></script>
<script>
var barChartData =
{
labels: [@Html.Raw(ViewBag.FruitNames)],
datasets: [{
label: 'ProductWise Sales Count',
backgroundColor: [
"#f990a7",
"#aad2ed",
"#9966FF",
"#99e5e5",
"#f7bd83",
],
borderWidth: 2,
url: '/Fruit/GetData',
type: 'GET',
datatype: 'json',
data: [
{ 'Data': 'FruitName', 'name': 'FruitName' },
{'Data': 'FruitQuantity','name':'FruitQuantity'}
]
}]
};
window.onload = function () {
var ctx1 = document.getElementById("barcanvas").getContext("2d");
window.myBar = new Chart(ctx1,
{
type: 'bar',
data: barChartData,
options:
{
title:
{
display: true,
text: "ProductWise Sales Count"
},
responsive: true,
maintainAspectRatio: true
}
});
}
</script>
</head>
<body>
<div style="text-align: center">
<canvas id="barcanvas"></canvas>
</div>
<div style="text-align: center">
Disclaimer:- This data is for demo it is
not real data it wont relate to any company
</div>
</body>
</html>
The results of the current operation is as follows:
{"data":[{"Id":1,"FruitName":"Apple","FruitQuantity":25},{"Id":2,"FruitName":"Banana","FruitQuantity":50},{"Id":3,"FruitName":"Pear","FruitQuantity":75},{"Id":4,"FruitName":"Apple","FruitQuantity":20}]}