Asp.net core 如何在razor视图中使用引导显示图表
我正在实施一个asp.net核心项目。我在Home controller中编写了一些查询，它们的输出用于相关视图中的一些图表。当我只显示一个带有相关查询的图表时，它工作正常，页面显示该图表，但当我想使用bootstrap和相关查询显示4个图表时，它不会显示任何内容。如果有人告诉我问题出在哪里，我将不胜感激Asp.net core 如何在razor视图中使用引导显示图表,asp.net-core,razor,Asp.net Core,Razor,我正在实施一个asp.net核心项目。我在Home controller中编写了一些查询，它们的输出用于相关视图中的一些图表。当我只显示一个带有相关查询的图表时，它工作正常，页面显示该图表，但当我想使用bootstrap和相关查询显示4个图表时，它不会显示任何内容。如果有人告诉我问题出在哪里，我将不胜感激 @using System.Linq; @model CSDDashboard.TempClasses.ChartListObjects @{ var XLabels = Newtonsof
@using System.Linq;
@model CSDDashboard.TempClasses.ChartListObjects
@{
var XLabels = Newtonsoft.Json.JsonConvert.SerializeObject(Model.TotalReqStatus.Select(i => i.DimensionOne).ToList());
var YValues = Newtonsoft.Json.JsonConvert.SerializeObject(Model.TotalReqStatus.Select(i => i.Quantity).ToList());
ViewData["Title"] = "Pie Chart";
}
@{
var XLabels1 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedTimeAvg.Select(i => i.DimensionOne).ToList());
var YValues1 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedTimeAvg.Select(i => i.Quantity).ToList());
ViewData["Title"] = "Line Chart";
}
@{
var XLabels2 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedPercent.Select(i => i.DimensionOne).ToList());
var YValues2 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedPercent.Select(i => i.Quantity).ToList());
ViewData["Title"] = "Line Chart";
}
@{
var XLabels3 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedApiToApplicantAvg.Select(i => i.DimensionOne).ToList());
var YValues3 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedApiToApplicantAvg.Select(i => i.Quantity).ToList());
ViewData["Title"] = "Line Chart";
}
<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html, body, h1, h2, h3, h4, h5 {
font-family: "Raleway", sans-serif
}
</style>
<head>
<meta name="viewport" content="width=device-width" />
<title>Charts</title>
<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>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<!-- cell 1 -->
<div class="w3-quarter">
<div class="w3-container w3-red w3-padding-16">
<div class="w3-left"><i class="fa fa-comment w3-xxxlarge"></i></div>
<div class="w3-right">
<h3>@ViewBag.TotalApplicationCount</h3>
</div>
<div class="w3-clear"></div>
<h4>Applications Count </h4>
</div>
</div>
</div>
<div class="col">
<div class="w3-quarter">
<div class="w3-container w3-blue w3-padding-16">
<div class="w3-left"><i class="fa fa-eye w3-xxxlarge"></i></div>
<div class="w3-right">
<h3>@ViewBag.TotalApplicantCount</h3>
</div>
<div class="w3-clear"></div>
<h4>Total Applicant Count</h4>
</div>
</div>
<!-- cell 2 -->
</div>
<div class="col">
<div class="w3-quarter">
<div class="w3-container w3-teal w3-padding-16">
<div class="w3-left"><i class="fa fa-share-alt w3-xxxlarge"></i></div>
<div class="w3-right">
<h3>@ViewBag.grantedCount</h3>
</div>
<div class="w3-clear"></div>
<h4>Granted Application</h4>
</div>
</div>
<!-- cell 3 -->
</div>
<div class="col-5" >@*style="width:30%">*@
<!-- pie chart -->
<script type="text/javascript">
$(function () {
var chartName = "chart";
var ctx = document.getElementById(chartName).getContext('2d');
var data = {
labels: @Html.Raw(XLabels),
datasets: [{
label: "Drinks Chart",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderWidth: 1,
data: @Html.Raw(YValues)
}]
};
var options = {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
}
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type:'pie'
});
});
</script>
<!--cell 4 row 1-->
</div>
</div>
<div class="row">
<div class="col">
<!-- line chart -->
<script type="text/javascript">
$(function () {
var chartName = "chart";
var ctx = document.getElementById(chartName).getContext('2d');
var data = {
labels: @Html.Raw(XLabels1),
datasets: [{
label: "Countries Chart",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderWidth: 1,
data: @Html.Raw(YValues1)
}]
};
var options = {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
}
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type:'line'
});
});
</script>
<!--cell 1 row 2-->
</div>
<div class="col">
<!-- line chart -->
<script type="text/javascript">
$(function () {
var chartName = "chart";
var ctx = document.getElementById(chartName).getContext('2d');
var data = {
labels: @Html.Raw(XLabels2),
datasets: [{
label: "Countries Chart",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderWidth: 1,
data: @Html.Raw(YValues2)
}]
};
var options = {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
}
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type:'line'
});
});
</script>
<!--cell2 row 2-->
</div>
<div class="col">
<!-- line chart -->
<script type="text/javascript">
$(function () {
var chartName = "chart";
var ctx = document.getElementById(chartName).getContext('2d');
var data = {
labels: @Html.Raw(XLabels3),
datasets: [{
label: "Countries Chart",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderWidth: 1,
data: @Html.Raw(YValues3)
}]
};
var options = {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
}
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type:'line'
});
});
</script>
<!--cell3 row3-->
</div>
</div>
</div>
</body>
</html>
@使用System.Linq；
@模型csdashboard.TempClasses.ChartListObjects
@{
var XLabels=Newtonsoft.Json.JsonConvert.SerializeObject（Model.TotalReqStatus.Select（i=>i.DimensionOne.ToList（））；
var YValues=Newtonsoft.Json.JsonConvert.SerializeObject（Model.TotalReqStatus.Select（i=>i.Quantity.ToList（））；
ViewData[“标题”]=“饼图”；
}
@{
var XLabels1=Newtonsoft.Json.JsonConvert.SerializeObject（Model.GrantedTimeAvg.Select（i=>i.DimensionOne.ToList（））；
var YValues1=Newtonsoft.Json.JsonConvert.SerializeObject（Model.GrantedTimeAvg.Select（i=>i.Quantity.ToList（））；
ViewData[“标题”]=“折线图”；
}
@{
var XLabels2=Newtonsoft.Json.JsonConvert.SerializeObject（Model.GrantedPercent.Select（i=>i.DimensionOne.ToList（））；
var YValues2=Newtonsoft.Json.JsonConvert.SerializeObject（Model.GrantedPercent.Select（i=>i.Quantity.ToList（））；
ViewData[“标题”]=“折线图”；
}
@{
var XLabels3=Newtonsoft.Json.JsonConvert.SerializeObject（Model.GrantedApiToApplicantAvg.Select（i=>i.DimensionOne.ToList（））；
var YValues3=Newtonsoft.Json.JsonConvert.SerializeObject（Model.GrantedApiToApplicantAvg.Select（i=>i.Quantity.ToList（））；
ViewData[“标题”]=“折线图”；
}
W3.CSS模板
html、正文、h1、h2、h3、h4、h5{
字体系列：“Raleway”，无衬线
}
图表
@ViewBag.TotalApplicationCount
应用程序计数
@ViewBag.TotalApplicationCount
申请人总数
@ViewBag.grantedCount
批准的申请
@*style=“宽度：30%”*@
$（函数（）{
var chartName=“chart”；
var ctx=document.getElementById（chartName.getContext（'2d'）；
风险值数据={
标签：@Html.Raw（XLabels），
数据集：[{
标签：“饮料表”，
背景颜色：[
"rgba(255,99,132,0.2)",，
“rgba（54162235,0.2）”，
"rgba(255,206,86,0.2)",，
“rgba（751921920.2）”，
“rgba（153102255,0.2）”，
"rgba(255,159,64,0.2)",，
“rgba（255,0,0）”，
'rgba（0，255，0）'，
'rgba（0,0,255）'，
“rgba（192192192）”，
'rgba（255，255，0）'，
'rgba（255,0255）'
],
边框颜色：[
"rgba(255,99132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
"rgba(255,159,64,1)",，
“rgba（255,0,0）”，
'rgba（0，255，0）'，
'rgba（0,0,255）'，
“rgba（192192192）”，
'rgba（255，255，0）'，
'rgba（255,0255）'
],
边框宽度：1，
数据：@Html.Raw（Y值）
}]
};
变量选项={
MaintaintAspectRatio:false，
比例：{
雅克斯：[{
滴答声：{
分:0,，
贝吉纳泽罗：是的
},
网格线：{
显示：对，
颜色：“rgba（255,99164,0.2）”
}
}],
xAxes：[{
滴答声：{
分:0,，
贝吉纳泽罗：是的
},
网格线：{
显示：假
}
}]
}
};
var myChart=新图表（ctx{
选项：选项，
数据：数据，
类型：'派'
});
});