Asp.net MVC和Chart js [英] Asp.net MVC and Chart js
问题描述
我想用chart.js显示来自databse的数据.
I want to show data that comes from databse with chart.js.
在asp.net MVC中，我有一个控制器，该控制器从数据库中检索数据并使用以下代码在视图中显示它们:
In asp.net MVC i have a controller that retrieves data from the database and shows them in view with the following code:
@foreach(var items in Model)
{
<h6>@items.title</h6>
<h6>@items.cuntr</h6>
}
如何在chart.js中显示@items.title和@items.cuntr?非常感谢.
How can I show @items.title and @items.cuntr in chart.js? Thanks a lot.
推荐答案
看看此链接: http://www.c-sharpcorner.com/article/create-free-charts-using-chart-js-in-asp -net-mvc/ 它描述了在mvc中使用图表的所有相关步骤.
Take a look at this link: http://www.c-sharpcorner.com/article/create-free-charts-using-chart-js-in-asp-net-mvc/ It describes all the relevant steps to work with charts in mvc.
让我们说这是您的控制器方法:
Let us say that this is your controller method:
public ActionResult Index()
{
ViewBag.Data = "Value,Value1,Value2,Value3"; //list of strings that you need to show on the chart. as mentioned in the example from c-sharpcorner
ViewBag.ObjectName = "Test,Test1,Test2,Test3";
}
您可以将数据返回到视图包中，然后将其传递给数据属性，以用于图表:
You can return the data in a view bag and pass them to the data property oif the chart:
这是您的观点:
@{
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.ObjectName)], //the names displayed on the x-axis, see images below
datasets: [{
label: 'ProductWise Sales Count',
backgroundColor: [
"#f990a7",
"#aad2ed",
"#9966FF",
"#99e5e5",
"#f7bd83",
],
borderWidth: 2,
data: [@ViewBag.Data] //what you returned back from controller. values displayed on the y-axis, see images below
}]
};
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>
这篇关于Asp.net MVC和Chart js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
